Question

Is there a way to apply a single view model to several elements?

Basically I have a section of html that the view model (VM1) should be bound to, and I have another view model (VM2) that needs to be bound to a subsection of this. KO doesn’t seem to like this though (I even tried using ko.cleanNode(element) on the subsection). So what I’m trying to do is be more specific in my binding by applying it to each piece that needs it. This is hard to explain without code, so here we go:

<section>
    <ul>
        <li id="one">...</li>
        <li id="two">...</li>
        <li id="three">...</li>
        <li id="diffmodel">...</li>
    </ul>
</section>

What I currently have is VM1 being bound to <section>, and VM2 being bound to #diffmodel, but KO doesn’t seem to like this.

My current objective (and the question proposed) is to apply VM1 to #one, #two, and #three, and VM2 to #diffmodel, but that doesn’t seem to work either (VM1 isn’t being bound at all).

Is there a nice solution to this type of situation?

Answer 1

A pretty easy solution is to use a custom binding to prevent the children of an element from being bound.

It would be something like:

ko.bindingHandlers.ignoreBindings = {
    init: function() {
        return { controlsDescendantBindings: true };
    }        
};

var VM1 = {
    valueOne: ko.observable("one"),
    valueTwo: ko.observable("two"),
    valueThree: ko.observable("three")   
};

var VM2 = {
    different: ko.observable("different")  
};

ko.applyBindings(VM1);
ko.applyBindings(VM2, document.getElementById("diffmodel"));

HTML:

<section>
    <ul>
        <li id="one" data-bind="text: valueOne"></li>
        <li id="two" data-bind="text: valueTwo"></li>
        <li id="three" data-bind="text: valueThree"></li>
        <li data-bind="ignoreBindings: true">
            <div id="diffmodel" data-bind="text: different"></div>
        </li>
    </ul>
</section>​​

Sample here: http://jsfiddle.net/rniemeyer/FesgK/

In KO 2.1 (in RC at the moment), the ignoreBindings custom binding could even be used as a containerless binding like: http://jsfiddle.net/rniemeyer/FesgK/1/