Question

我有一个html标记块，我想使用Knockout JS将数据绑定到div。对于挖空html绑定，这很简单。

我想要做的是根据他们的类有条件地绑定该html标记中的子元素。这些元素可以出现在html标记中的任何位置，因为它们是内联元素（如span，a标记等）。

这样做的目的是将事件数据绑定到此文本块中的特定单词或短语，以便我可以调用一个函数（在这种情况下，是一个带有目标单词或短语定义的模态）。

有谁知道怎么做？从我所看到的，我有两个主要的途径可以探索：

使用jQuery按类抓取元素，然后以某种方式数据绑定到事后。我不知道这是否适用于各种各样原因 - 没有准备好DOM，无法进行数据绑定等方法
使用knockout template binding，并添加一个afterRender模板回调，用于解析元素和数据块的文本块相应的。
上述两者的组合。（是的，我知道，这是三个途径。）

以前有人做过这样的事吗？如果可能的话，我想得到你的建议和反馈。谢谢！

Answer 1

除非您确定要绑定的html是安全的，否则我不建议使用此方法。 html绑定看起来像这样。

ko.bindingHandlers['html'] = {
    'init': function() {
        // Prevent binding on the dynamically-injected HTML 
        // (as developers are unlikely to expect that, and it 
        // has security implications)
        return { 'controlsDescendantBindings': true };
    },
    'update': function (element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor());
        ko.utils.setHtml(element, value);
    }
};

看着这个你可以写一个html2绑定

ko.bindingHandlers['html2'] = {
    'init': function() {
        return { 'controlsDescendantBindings': false };
    },
    'update': function (element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor());
        ko.utils.setHtml(element, value);
    }
};

http://jsfiddle.net/madcapnmckay/LDtuF/1/

注意这一点，你要确保html不能用于不安全的目的。

希望这有帮助。

以编程方式将Knockout绑定应用于文本块中的特定标记

1 个答案: