Chaining Knockout Custom Bindings

Question

I have a Knockout custom binding handler that I want to call the foreach bindings functionality on within it and then call a callback function afterwards. I keep getting a "Uncaught Error: You cannot apply bindings multiple times to the same element. " error now as I try to do this.

My custom binding is pretty simple (typescript):

/// <reference path="knockout.d.ts" />
ko.bindingHandlers["postForeach"] = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        if (!allBindingsAccessor().postForeachCallback)
            throw "Callback not defined for postForeach binding!";

        //call foreach init functionality
        ko.bindingHandlers['foreach'].init(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext);
    },
    update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
            //call foreach update functionality
            ko.bindingHandlers['foreach'].update(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext);
            //call callback
            allBindingsAccessor().postForeachCallback();
    }
};

Is there something I am missing in constructing this?

Thanks!

EDIT:

Callback Function

self.populateMainContentWindow = function () {
                    var dataTable = $(this.tableId).dataTable();
        dataTable.fnDestroy();

                // create the datatable
                        var actualTable = this.jQuery(this.tableId);
        if (actualTable.length == 0) {
            return false;
        }

        // create the data table with options
        var newDataTable = actualTable.dataTable(this.options);

        // always set the width afterwards
        actualTable.css("width", "100%");
            };

Data Bind Signature (which is within a 'with' binding):

postForeach: array, postForeachCallback: $parent.viewModel().populateMainContentWindow

Answer 1

Knockout uses the return value of init to determine whether it should process the element's descendants. You can either just return the value of the foreach.init function or specifically return { controlsDescendantBindings: true } from your init function:

init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
    if (!allBindingsAccessor().postForeachCallback)
        throw "Callback not defined for postForeach binding!";

    //call foreach init functionality
    return ko.bindingHandlers['foreach'].init(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext);
},

Reference: http://knockoutjs.com/documentation/custom-bindings-controlling-descendant-bindings.html

Answer 2

Variant 1
I think your current binding looks like

data-bind="foreach: someArray, postForeach: ..."  

You can setup value for foreach binding inside postForeach binding. e.g:

data-bind="postForeach : 
           {postForeachCallback : function()
                                  {
                                    alert('After')
                                  },
           foreach: someArray}" // this is your old foreach  

binding:

ko.bindingHandlers["postForeach"] = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        if (!valueAccessor().postForeachCallback)
            throw "Callback not defined for postForeach binding!";

        //call foreach init functionality
        return ko.bindingHandlers['foreach'].init(element, valueAccessor().foreach, allBindingsAccessor, viewModel, bindingContext);
    },
    update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
            //call foreach update functionality
            ko.bindingHandlers['foreach'].update(element, valueAccessor().foreach, allBindingsAccessor, viewModel, bindingContext);
            //call callback
            valueAccessor().postForeachCallback();
    }
};  

JSFiddle DEMO

Variant 2
This varian view model (innerViewModel) inside view model. This view model is binded with with binding.
Now data-bind lookls like

data-bind="postForeach : true, postForeachCallback : $parent.postCallback, foreachEx: values"  

View looks like

<div data-bind="with: innerViewModel">
   <ul data-bind="postForeach : true, postForeachCallback : $parent.postCallback, foreachEx: values">
       <li data-bind="text: val"></li>
   </ul>
</div>

JSFiddle DEMO

Answer 3

It doesn't look like it has anything to do with the code you posted. Rather, it looks like there are multiple calls to applyBindings, and two of them are hitting the same element.

Example: http://jsfiddle.net/tlarson/bFKuL/ (look in the console for the error)

var vm = {
    Name: "George"
}
ko.applyBindings(vm);
ko.applyBindings(vm);

Markup:

<div data-bind="text:Name"></div>

To get around this, don't call applyBindings on the same element twice. To help you figure out exactly how to do this with your code, we'd need to see more of your code, such as a fiddle that demonstrates the problem.