Home

Anders Malmgren edited this page Aug 29, 2014 · 28 revisions

Welcome to the Knockout.BindingConventions wiki!

Knockout.BindingConventions is a Convention Over Configuration library for KnockoutJS, many of the convention rules are borrowed from the excellent Caliburn.Micro framework for XAML based applications.

Install using Nuget

Install-Package Knockout.BindingConventions

The convention HTML5 attribute

The library uses its own attribute, data-name. The value of the attribute specifies a member on the current binding context.

<!-- firstName is a member on the ViewModel -->
<span data-name="firstName"></span>

You can also use $data to point out the current binding context

<span data-name="$data"></span>

Pointing out child contexts are also valid. It does not support that you change the parent(s) after binding. If you want that behaviour use the with convention

<span data-name="parent.child"></span>

Options

You can override the default Options

Built in conventions:

Adding own conventions

Its possible to add your own convention by adding a object to ko.bindingConventions.conventionBinders

ko.bindingConventions.conventionBinders.inputEnable = {
    rules: [function(name, element, bindings, unwrapped, type) { return type === "boolean" && element.tagName === "INPUT"; }],
    apply: function(name, element, bindings, unwrapped, type, data) {
        bindings.enable = data;
    }
};

Rules is an array of functions that all must return true for the convention to apply. Apply is a function that applies the convention. In the example above the custom convention will be starved by the built in input convention because it will bind the boolean to the checked binding. What you can do is to add a rule to the input convention like

ko.bindingConventions.conventionBinders.input.rules.push(function(name, element, bindings, unwrapped, type) { type !== "boolean" });

This will change the input convention so it will no longer bind against booleans

http://jsfiddle.net/gSAjH/5/

Performance

Even though the library is doing a lot under the hood it does not perform slower than the classic binding provider

http://jsperf.com/classic-ko-binding-vs-convention-binding/3

Detailed blog about library

If you want to get a deeper understanding how this library ticks, go here

Third party support