Search code examples
javascriptjsviews

Confusion on "Data-linked elements"

I am reading up this page http://www.jsviews.com/#linked-elem-syntax and testing a bit.

  1. I like to start with this ..

Notice that the <input data-link="name trigger=true"/> tag automatically has two-way data-binding.

Am I correct to say that if removing "trigger=true" will make the one-way binding? Or, Is it still two-way binding?

The only difference that I found for having "trigger=true" and not having "trigger=true" is that you will get the update on property-changed event if you have "trigger=true". otherwise, you will see get the update on lost-focus event.

  1. I am also confused about having ":" before at the end.

Notice the full syntax for the has an additional ':' before the '}' at the end. It corresponds to the two-way data binding.

Does it mean that having ":" at the end has the same effect as having "trigger=true"?

But i tried the code below and it doesn't work like the code that has "trigger=true".

<input data-link="{:name:}"/>
Solution

  • The section Optional two-way data-binding of http://www.jsviews.com/#linked-elem-syntax explains that the ":" at the end determines whether you have two-way binding or not.

    If you do have two-way binding then you can also set trigger=true to trigger a binding update after every character entry (after key down). Otherwise, by default, the update is on "blur" or "change" only.