JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › General Discussions › Dynamically add new data bound elements and variables
Tagged: application binding, data binding, smart framework
- This topic has 3 replies, 2 voices, and was last updated 5 years, 1 month ago by admin.
-
AuthorPosts
-
October 29, 2019 at 2:55 am #100464adminKeymaster
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 throughapp.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 appearssmart-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?October 29, 2019 at 3:19 am #100465adminKeymasterHi,
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.comOctober 29, 2019 at 4:20 am #100466adminKeymasterI have tried doing things in the following order
- Construct Smart.App object with blank parameter (aka
{}
) - Inject new span with double bracket into body after page load
- 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.October 29, 2019 at 6:35 am #100467adminKeymasterHi 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 - Construct Smart.App object with blank parameter (aka
-
AuthorPosts
- You must be logged in to reply to this topic.