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