bsatrom/Knockout.Unobtrusive @ GitHub

Knockout.Unobtrusive is all about moving your binding syntax from HTML into your JavaScript. If you like the declarative data-bind syntax of Knockout, and see no reason to muck with it, this plugin is probably not for you. No worries, my feelings won't be hurt.

If, however, the phrase "Unobtrusive JavaScript" is something of a personal mission for you, welcome to Knockout.Unobtrusive, a simple plugin that allows you to use the best JavaScript MVVM library around with script-based binding definitions.

Dependencies

KnockoutJS v1.2.1 or higher

Install

Getting started is simple. Just download KnockoutJS and this plugin and include the following script references in your page.

<script src="knockout-1.2.1.js"></script>
<script src="knockout.unobtrusive.js"></script>

From data-bind to a Bindings Object

Once you've included a reference to Knockout.Unobtrusive in your page, you can begin moving the bindings contained in data-bind attributes in your markup into your JavaScript. If you're creating new markup, you can forego using data-bind attributes and use a bindings object instead. Consider the following markup:

 <fieldset>
   <legend>Speaker Info</legend>
   Name: <input type="text" data-bind="value: name" /> <br/>
   Bio: <input type="text" data-bind="value: bio" /> <br />
   Twitter Handle: <input type="text" data-bind="value: twitterHandle" /> <br />
   Photo Url: <input type="text" data-bind="value: photoUrl" />    
 </fieldset>

For each element with a data-bind attribute, we'll need to create an entry in a bindings object that knockout.unobtrusive can then use to generate those bindings on our behalf. For the markup above, the object may look something like the following:

var bindings = {
  value: ['name', 'bio', 'twitterHandle', 'photoUrl']
};

Once your created this object, you can remove the data-bind attributes on your markup. The only requirement on your markup that Knockout.Unobtrusive assumes is that you've assigned id or name values to each element, consistent with the bindings you define. As such, the bindings object above assumes you have elements with id or name values of 'name', 'bio', 'twitterHandle' and 'photoUrl,' as below:

 <fieldset>
   <legend>Speaker Info</legend>
   Name: <input type="text" id="name" /> <br/>
   Bio: <input type="text" id="bio" /> <br />
   Twitter Handle: <input id="twitterHandle" type="text" /> <br />
   Photo Url: <input id="photoUrl" type="text" />    
</fieldset>

Once you've created a bindings object and adjusted your markup accordingly, you'll need to call knockout.uobtrusive's createBindings() method before your call Knockout's ko.applyBindings() method. The createBindings method accepts a bindings object:

ko.unobtrusive.createBindings(bindings);
ko.applyBindings(viewModel);

When called with a valid bindings object, createBindings() will create all of the data-bind attributes that KnockoutJS depends on.

Sample

The embedded JSFiddle below illustrates Knockout.Unobtrusive in action. Feel free to try it out live!

Note: If you cannot view the embedded Fiddle above for any reason, click here to view it at JSFiddle.net.

Contact

Brandon Satrom
bsatrom@gmail.com
@brandonsatrom

Download

You can download this project in either zip or tar formats.

You can also clone the project with Git by running:

$ git clone git://github.com/bsatrom/Knockout.Unobtrusive

License

MIT Knockout.Unobtrusive is provided under the terms of the MIT License.