Chapter 5 – Interactive Binding
Bind events to a tag
The VM functions:
Now if you add another observable: (True/False) and bind it to a tag to toggle between True/False, and then bind it to a [visible] property of another tag, then you can achieve the effect of mouseover-show/mouseout-hide effect.
You can pass extra parameter to these two functions (self.showDetails and self.hideDetails) so they can be shared by more than one tags.
To do this:
Use to enable or disable form fields.
phone2 will be enabled only when phone 1 has a value (empty == null, so has to have something there; even a space)
Used in checkboxes and radio buttons
Add a new observable (True/False), and a checkbox that binds to this observable.
Checked and observable are 1-to-1 relationship (2-way binding)
It’s also possible to use the [checked] to bind with (observable arrays).
Use [checked] in radio button
Options Binding (drop down list or multi-select list)
11:28am, 01/21/2013, Page 52
Using Objects as Options
If you have a list of products in an observable array, and you would like to create a drop down list from it.
If it’s working, in the function(data), assign them to the observables!
Now the data is loaded:
It’s tricky to convert [observables] to JSON and send to server. Fortunately, KO has a utility function ko.toJSON().
Mapping Data to ViewModels
Manually mapping loaded data into observables can become quite tedious if you’re working with more than a few properties. Here comes the Mapping plug-in. Allow you automatically map JSON objects (from server) to VM observables.
Include the KO mapping library
The data is loaded as soon as the page is loaded.
Page 59, 08:25pm, 01/21/2013