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:
<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.