Home > English > Knockoutjs and Convention Over Configuration

Knockoutjs and Convention Over Configuration

I am a big fan of getting rid of as much ceremony as possible in my development life-cycle. I also really like the paradigm for rich databinding that we were able to do in XAML technologies. Here comes Knockout.js giving us the same richness of declarative data-binding. Knockout.js is very nice but still requires a bit of scaffolding to get our markup data bound correctly.

Here is a sample of standard Knockout.js markup:

<span>First Name:</span>
<input data-bind="value: firstName" /><br />
<span>Middle Name:</span>
<input data-bind="value: middleName" type="text" /><br />
<span>Last Name:</span>
<input data-bind="value: lastName" /><br />
<span>Password:</span>
<input data-bind="value: password" type="password" /><br />
<span>Is Active:</span>
<input data-bind="checked: isActive" type="checkbox" /><br />
<button data-bind="click: run">Run</button>

The following is the same markup but now using a using a simple convention:

<span>First Name:</span>
<input data-name="firstName" /><br />
<span>Middle Name:</span>
<input data-name="middleName" /><br />
<span>Last Name:</span>
<input data-name="lastName" /><br />
<span>Password:</span>
<input data-name="password" type="password" /><br />
<span>Is Active:</span>
<input data-name="isActive" type="checkbox" /><br />
<button data-name="run">Run</button>

Now, this may not seem like a very big deal but I would say that the less markup I have to write the better. One nice thing about this approach is that it will always honor data-bind markup first and only fallback to the convention when no standard binding exists.

Here is the output for the second markup:

If you notice carefully, you will see that the button is disabled. This is because the enable property is tied to the Is Active checkbox. You can see how the button is enabled when the Is Active checkbox is checked:

Finally, here is the viewmodel that we were bound to:

var ViewModel = function () {
    var self = this;

    self.firstName = ko.observable("Matthew");
    self.middleName = ko.observable("Kevin");
    self.lastName = ko.observable("Duffield");
    self.password = ko.observable("");
    self.isActive = ko.observable(false);

    self.canrun = ko.computed(function () {
        return self.isActive();
    }, self);
    self.run = function () {
        alert("You hit run!");
    };
};

As you can see, the convention basically allows us to take the value from the data-name attribute and find the corresponding Knockout observable on the viewmodel. We also have a default convention that takes the value from the data-name attribute and finds a corresponding function with the same name. The convention also pre-pends the word “can” to the value from the data-name attribute and binds the enable property of the button to a function with that name if it exists.

In the next post, I will walk you through building this custom convention binding provider for Knockout.

Advertisements
  1. July 1, 2013 at 8:06 am

    Nice work! (Found this blog when searching for discussion about my own lib).

    I’ve made a fully featured Caliburn Micro styled Convention over configuration library for KO, complete with template convention, you can check it out here.

    https://github.com/AndersMalmgren/Knockout.BindingConventions

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: