sets the value of the element to match value of the property. works well for input, select, and textarea elements. treats undefined, null, and NaN as '' (empty string).

note: The binding will only be applied if the element is not currently in focus. This is done by checking to see if the element is the document.activeElement first. The reason it works this way is because if you've set up two-way data bindings you get a circular event: the input changes, which sets the bound model property, which in turn updates the value of the input. This might sound OK but results in the cursor always jumping to the end of the input/textarea. So if you're editing the middle of a bound text field, the cursor keeps jumping to the end. We avoid this by making sure it's not already in focus thus avoiding the bad loop.

name:'active'// (optional) name of class to toggle if different than key name

},

{

type:'attribute',

selector:'#something',// or hook

name:'width'

}

]

The attribute, booleanAttribute and booleanClass types also accept an array for the name property (and yes/no for booleanClass). All the values in the array will be set the same as if each were bound separately.

We've started using this convention a lot, rather than using classes and IDs in JS to select elements within a view, we use the data-hook attribute. This lets designers edit templates without fear of breaking something by changing a class. It works wonderfully, but the only thing that sucks about that is the syntax of attribute selectors: [data-hook=some-hook] is a bit annoying to type a million types, and also in JS-land when coding and we see [ we always assume arrays.

So for each of these bindings you can either use selector or hook, so these two would be equivalent:

Previously after having given views the ability to have their own properties (since view inherits from state) it was awkward to bind those to the DOM. Also, for binding things that were not just this.model the syntax had to change.