JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › General Discussions › Dynamically add new data bound elements and variables › Reply To: Dynamically add new data bound elements and variables
October 29, 2019 at 3:19 am
#100465
Keymaster
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