HTML Elements Forums Framework Dynamically add new data bound elements and variables

This topic contains 3 replies, has 2 voices, and was last updated by  admin 1 month, 2 weeks ago.

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

    Anonymous

    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

    Anonymous

    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.