knockout.js - knockout 自定义 html 绑定(bind)

Question

我正在尝试使用 knockout 创建一个 html 编辑器/预览器。我使用单个可观察对象设置了一个简单的测试，如下所示:

JS:

var ViewModel = function() {
    this.content = ko.observable("<div data-bind=\"text: 'testext'\"></div>");
};

ko.bindingHandlers.bindHTML = {
    'init': function () {
    },
    'update': function (element, valueAccessor) {                         
        ko.utils.setHtml(element, valueAccessor());
    }
}

ko.applyBindings(new ViewModel());

HTML:

<input type="text" data-bind="value: content">

当页面第一次加载时，这似乎工作正常，显示一个带有“测试文本”的 div，但是一旦我将输入字段编辑为类似 <div data-bind=\"text: 'testext2'\"></div>绑定(bind)不起作用!

这是 knockout 的限制，还是我做错了什么？有没有办法进行重新绑定(bind)？

此处提供 JSFiddle:http://jsfiddle.net/Q9LAA/

Answer 1

有一个 html 绑定(bind)可以自动为你插入 html(我更喜欢这个而不是使用 setHtml)，但它不会评估插入的绑定(bind)html，您必须在生成的 html 上重新应用绑定(bind)(这就是您需要自定义绑定(bind)的地方)。

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);
    }
};

这是更新的 fiddle演示其用途。