JavaScript UI Libraries & Blazor Components Suite – Smart UI Forums General Discussions Dynamically add new data bound elements and variables

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #100464
    admin
    Keymaster

    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?

    #100465
    admin
    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

    #100466
    admin
    Keymaster

    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.

    #100467
    admin
    Keymaster

    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

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.