Knockoutjs MVVM

Saturday, March 1, 2014

Declarative binding, create observable, bind viewmodel to view


Data bind a span tag, update the input field and view the updated span


Using an object literal to setup the viewmodel


Set up view model using a function


In visual studio, the html page, references element and data bind


The javascript file with the view model and binding


One way data binding


View in the browser


Two way data binding with observables


Make a change in ui, pushed back to viewmodel/model


Computed observable


View the result of computed observable in browser


Computed observable composed photo url


Result in browser


Observable array using revealing module pattern


In html binding a foreach over the marathon object


View result in browser


Add an input and databind to the name


Update the input text box, tab out and view the changes immediately reflected in the span, two way data binding in action


Remove observable property from name, add checkValue function, expose the function to the UI


Add a button beneath the list and databind to the checkValue expression


Modify the contents of first text box, notice the span is not updated, click the button, notice the value is updated.


Make name observable again, add the parentheses


Change the first value text box, span is updated, click the button


Observables are functions, don't forget the ()


Default Success Warning Important Info Inverse
B S W I ? O