TechHui

Hawaiʻi's Technology and New Media Community

The front-end framework of choice for MVC 4 web applications seems to be Knockout.js.  It's fairly robust and easy to add/remove from projects via NuGet and provides an MVVM feel much like Silverlight or WPF.

Think of a label control used in WPF.  Using data bindings, you tell the label to display certain text.  If the object representing the text displayed is updated, WPF kindly updates the value shown in the label for you.  Knockout.js does the same thing for standard HTML elements.  Here's the label along with an input control:

<label for="some-control">Label:</label>

<input type="text" id='some-control' value="my value"/>

Once value is set and label text are set, they don't react to any other events on the page.  To update either of these elements, a prototype/jquery  script would be required.  But, if you bind with knockout, this is what they look like:

<label for='some-control' data-bind='value: $root.label' />

<input id='some-control' data-bind='value: $root.someAttribute'/>

Now whenever view model bound to this page has its label or someAttribute value changed, knockout kindly manipulates the DOM to the same values in the view model.  Sound familiar?   

Knockout provides tons of bindings for different scenarios.  Bindings can handle visibility, boolean checks, custom function integration, and many more.  Be sure to checkout their tutorials and their binding documentation.  And, if their provided bindings aren't enough, checkout the custom bindings syntax.  Next post, we'll cover how to bind values to jquery autocomplete widget.

Anyone who has practical experience using MVVM architecture with Silverlight or WPF will feel comfortable quickly in the knockout environment.  Dive in and be sure to checkout the extras likeKOGrid.

Views: 136

Tags: 4, MVC, javascript, knockout.js

Comment

You need to be a member of TechHui to add comments!

Join TechHui

Comment by Douglas Ching on May 29, 2013 at 7:40am

There are so many Javascript libraries and frameworks that have slightly different uses and strengths.  I think I still like Angular.js the most, but I like Knockout's binding and it was easier to pick up on.  KendoUI also looks nice.

Sponsors

web design, web development, localization

© 2014   Created by Daniel Leuck.

Badges  |  Report an Issue  |  Terms of Service