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 asp.net 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