jquery - 以编程方式将 Knockout 绑定(bind)应用于文本 block 中的特定标记

Question

我有一个 html 标记 block ，我想使用 Knockout JS 将其数据绑定(bind)到 div 。通过 knockout html 绑定(bind)，这非常简单。

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

这样做的目的是将点击事件数据绑定(bind)到此文本 block 中的特定单词或短语，以便我可以调用一个函数(在本例中，是一个具有目标单词或短语定义的模式)。

有人知道该怎么做吗？据我所知，我有两个主要途径可以探索:

1. 使用 jQuery 按类获取元素，并在事后以某种方式进行数据绑定(bind)。我不知道这是否适用于各种原因 - 没有准备好 DOM，无法进行数据绑定(bind)该方法等。

2. 使用 knockout 的 template binding ，并添加一个 afterRender 模板回调来解析元素和数据绑定(bind)的文本 block 相应地。

3. 以上两者的组合。 (是的，我知道，这是三种途径。)

以前有人做过类似的事情吗？如果可能的话，我希望得到您的建议和反馈。谢谢!

Answer 1

除非您确定要绑定(bind)的 html 是安全的，否则我不推荐这种方法。 html 绑定(bind)如下所示。

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 绑定(bind)

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 不能用于不安全的目的。

希望这有帮助。