Dynamically add new data bound elements and variables

[admin]

Hello, I would like to know how one would attach new data bound form elements and new data variables to an existing Smart.App object.
I have attempted to simply directly add a new variable through app.data.newVariableName = "somevalue" but it does not appear to have any effect as any references to {{newVariableName}}, do not get replaced by “somevalue”.
I have attempted to use arrays and sub-properties but it appears smart-model attribute is not compatible with array index references (e.g. "arrayName[0]"), and not compatible with sub-property references (e.g. "name.property")
Do I just have to re-construct the Smart.App object every time I have a new data variable or new form input element?

[admin]

Hi,
smart-model is compatible with sub-property binding and we have demo about that: https://www.htmlelements.com/demos/framework/sub-property-binding/.
It is also possible to dynamically add additional objects to app.data.
For example:

window.onload = function() {
	const app = new Smart.App(
		{
			data: {
				details: {
					subject: "About Transaction",
					message: "Hey, Peter. Take a look at the items, I sent you earlier."
				}						
			}
		}
	)		
  
  app.data.test = 'test';
}

HTML

	<div class="demo-description">
	TextBox and MultilineTextBox are bound to sub properties. 
	</div>
	<br/>
	<smart-text-box smart-model="details.subject" id="textBox1"></smart-text-box>	<br/><br/>
	<smart-multiline-text-box  smart-model="details.message" id="textBox2"></smart-multiline-text-box>	
	<br/>	
	<span>{{details.subject}}</span>
	<br/>	
	<span>{{details.message}}</span>
	<span>{{test}}</span>

Demo: https://codepen.io/boyko-markov/pen/NWWvBRx?&editable=true
If it is array and you add it like that:

 app.data.array = ['hi', 'bye'];

in HTML you can refer it like that:

	<span>{{array.0}}</span>

Best Regards,
George
Smart HTML Elements Team
https://www.htmlelements.com

[admin]

I have tried doing things in the following order

1. Construct Smart.App object with blank parameter (aka {})
2. Inject new span with double bracket into body after page load
3. Set data value

It does not appear to replace the value contained in double brackets — it just continues to display the double brackets.
Adding the data value before the span has been injected, but after page load, does not appear to have any difference.
In addition, swapping the order of steps 1 and 2 appears to cause the entire page to blank out, including elements unrelated to the operation.

[admin]

Hi Starlight Sparkle,
Injecting spans into body is OK, if it is in the APP’s context. Otherwise, they won’t be rendered, as they are outside the App. Please, refer to the examples in the Framework demo section(ex: https://www.htmlelements.com/demos/framework/data-binding/) and the code we posted here in order to get the desired results.
Best Regards,
George
Smart HTML Elements Team
https://www.htmlelements.com

[Author]

Posts