data binding - write-software/enginejs GitHub Wiki

Data Binding

EngineJS contains both One-Way & Two-Way data binding.

One-Way:

This is achieve in 2 ways the first is with handlebars <a href="https://handlebarsjs.com">https://handlebarsjs.com</a> and the second way with EngineJS built-in notation.

{= object.property =}

So whats the difference, well the EngineJS is actually the evaluation of an expression so you can do somethingd like.

{= product.qty * 1.5 =}

Handlebars allows some conditional rendering…​

{{#if interested}}
    {{#if paid}}
        ...
    {{else}}
        ...
    {{/if}}
{{else}}
    ...
{{/if}}

Two-Way

Two-Way is also a built-in feature of EngineJS. Again there are 2 ways to implement it.

{% object.property %}

or include it in your html.

<div en-model="developmentModel" en-bind="title"></div> <br> or<br> <div en-bind="developmentModel.title"></div><br> or<br> <div en-bind="title"></div><br>

To initate two-way we simply add the en-observe attribute.

<input en-bind="title" en-observe="value"/>

This means the input will pre-filled with the value of the title property in the associate model and when it changes the title property will be automatically updated. Also upon update of the propert any other bindings will be automatically updated.

⚠️ **GitHub.com Fallback** ⚠️