Knockout JS – Custom Binding Handler to evaluate the content of an HTML Bind

With this custom Binding Handler we can have the binding over the content of an HTML Bind. So we can use data-bind attributes inside our bound HTML content.

ko.bindingHandlers.boundHTML = {
    init: function () {
        return { controlsDescendantBindings: true };
    },
    update: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
        var value = ko.utils.unwrapObservable(valueAccessor());
        ko.applyBindingsToNode(element, { html: value });
        ko.applyBindingsToDescendants(bindingContext, element);
    }
};
<span data-bind="boundHTML: Content"></span>
Advertisements