There is an html
binding that can insert html for you automatically (I would prefer this over using setHtml
), but it doesn't evaluate the bindings on the inserted html, you have to reapply the bindings on the generated html (and that is where you would need a custom binding).
ko.bindingHandlers.bindHTML = {
init: function () {
// we will handle the bindings of any descendants
return { controlsDescendantBindings: true };
},
update: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
// must read the value so it will update on changes to the value
var value = ko.utils.unwrapObservable(valueAccessor());
// create the child html using the value
ko.applyBindingsToNode(element, { html: value });
// apply bindings on the created html
ko.applyBindingsToDescendants(bindingContext, element);
}
};
Here's an updated fiddle demonstrating its use.