Knockout - Knock you out

Saturday, January 11, 2014

Fire up jsfiddle

Reference the latest jquery library and specify no wrap in body

Paste in the link to the latest version, cdn, of knockout library in external resources, hit add

Click the link goes to the online repository of knockout

Hit save to save this setup as a baseline fiddle and not have to go through the repetitive setup process

Type in this html in the html pane, hit ctrl+enter, view the result in the result pane

Insert this javascript code, the central command applybindings to all dom elements using the viewmodel for the bindings

Data-bind the dom elements attributes to the view model, hit run and view the result in the results pane

However clicking the button nothing happens and appending characters in the textbox, the span tag is out of synch

Make the string an observable and the function implement a function setter, now click on the button and updating the textbox, tab out, everything is updated

Adding valueupdate instruction, 2 way data binding enabled, the value of textbox is updated in the span, viewmodel changes and dependent span text changes in synch

Checkbox is bound to namevisible boolean observable property in view model, span is also bound to the nameVisible boolean property

Knockout homepage, great source for documentation and tutorials

The blog of the creator of knockout

An excellent blog entirely dedicated to knockout

An active forum on knockout

The google group knockoutjs ia another rich source of information

Add the dependentobservable, renamed to computed as of v2, add the span dom element, run the fiddle and view that checkbox checked message the name is visible

Uncheck the checkbox and view the span message

Replace dependentobservable with computed and view the same rich two way databinding of multiple properties

Add this html and javascript to the fiddle, view the javascript array with 3 items inside it

To the view model add a property and 2 functions, the property is of type observable array and takes in the javascript array as a parameter, the add function adds an item to the list and the remove function, removes the last item from the list

Bind the buttons to the add and remove functions

The listtempl template will be invoked for each item in the list, the list items text property is bound to the name property of the list

Click run and view that the list elements have been bound to the li tag

Hit add twice and view the two new list items

Hit remove and see that the last item has been removed

File new mvc 4 project

Select internet application with razor view engine

Right click on references and select manage nuget packages

Search for knockout and install the knockout nuget package

Hit close

In layout file add a reference to the knockout library

Double click on homecontroller in solution explorer to view that it contains 2 action methods

Position cursor in index action method, right click and select goto view

View that the index view is empty

Right click on scripts folder and add a new item

Add a javascript file named rb-index

Run the app and view, some changes made to the css, two tabs and a blank screen

Add this markup to the index file

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