Two main principles of Knockout are Observables and Bindings.
A sample one-way data bind to display text will look like the following
At high level the step(s) for the above are:
- Reference knockout.js
- Use data-bind attribute indicating the property name of the object. In the example above it is authorName
- Initialize a viewModel object with a single property authorName value set to ‘Girish Srinivasa’
- Use applyBindings methods passing in the viewModel object
In the following example the authorName property of the ViewModel object is changed when the the value in the text box is changed.
- data-bind=”text…” will render a label control
- data-bind=”value…” associated with <input tag will render a text box control
Change the value in text box control to Girish Srini and notice that the label still displays Girish Srinivasa
This is because there is notification to indicate that the ViewModel object property authorName requires updating. This can be corrected by the using observables that will have ViewModel object properties automatically updated as shown in the following snap shots.
On Initial Load
After changing the value in the text box