Reply To: Dynamically add new data bound elements and variables

[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