Jagan K
Jagan K

Reputation: 1057

Knockout containerless control for custom binding handler

I created custom binding handler "foreachprop"

ko.bindingHandlers.foreachprop = {
transformObject: function (obj) {
    var properties = [];
    for (var key in obj) {
        if (obj.hasOwnProperty(key)) {
            properties.push({ key: key, value: obj[key] });
        }
    }
    return properties;
},
init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
    var value = ko.utils.unwrapObservable(valueAccessor()),
        properties = ko.bindingHandlers.foreachprop.transformObject(value);
    ko.applyBindingsToNode(element, { foreach: properties });
    return { controlsDescendantBindings: true };
}
};

If i iterate through object

<div data-bind="foreachprop: sections"></div>

This works, However if i use containerless control, it is not working for same data

<!-- ko foreachprop: sections --> <!-- /ko -->

How to use continerless control flow for custom binding handlers

Jsfiddle created new http://jsfiddle.net/E6xq2/5/

Upvotes: 0

Views: 814

Answers (1)

John Earles
John Earles

Reputation: 7194

Take a look at the documentation:

http://knockoutjs.com/documentation/custom-bindings-for-virtual-elements.html

First, tell Knockout to allow your binding on virtual elements:

ko.virtualElements.allowedBindings.foreachprop = true;

Then, if necessary, rewrite your binding to use the virtual element APIs.

Upvotes: 3

Related Questions