Question

I’m really getting into ko and have a question regarding the applyBindings function.

It seems that, I may be doing it wrong, ko doesn’t like to apply bindings to the same part of the page. To avoid this we may pass a context/element as a second parameter to tell ko which area of the page to use.

What I want to do is pass in a third parameter that tells ko which elements/classes to ignore.

Essentially, I want to have nested areas that use different models.

Does anyone know if this is possible, or anyone else has already implemented it?

thanks

Answer 1

A couple of thoughts on this one:

1- Typically, you would not want to call ko.applyBindings more than once. A normal techinique is to use the template binding or if and with bindings to ensure that certain areas are not bound until something is ready. You can even have an overall view model that just contains observables for each area of your page. Then, you can use with bindings make sure that they don’t bind too soon and to swap them out.

Here is a simple, contrived example where you control the template name and data that you put in each section and can swap them out: http://jsfiddle.net/rniemeyer/6f5E9/. There are many ways that you could do this with the sample just being the most barebones approach.

2- Knockout does allow for custom binding providers. You could write a binding provider that would simply ignore certain elements based on a configurable selector.

Something like:

var myPartialBindingProvider = function(initialExclusionSelector) {
    var result = new ko.bindingProvider(),
        originalHasBindings = result.nodeHasBindings;

    result.exclusionSelector = initialExclusionSelector;

    result.nodeHasBindings = function(node) {
        return !$(node).is(result.exclusionSelector) && originalHasBindings.call(this, node);
    };

    return result;
};


ko.bindingProvider.instance = new myPartialBindingProvider(".skip");

This simple one wouldn’t handle children of elements that should be excluded, but it could be enhanced to mark the children in some way.

Here is a sample:
http://jsfiddle.net/rniemeyer/pC5rg/