2

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

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

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

有谁知道如何做到这一点？据我所知，我有两个主要途径可以探索：

  1. 使用 jQuery 按类抓取元素，并在事后以某种方式将数据绑定到 then。我不知道这是否会由于各种原因而起作用 - 没有准备好 DOM，无法在该方法中进行数据绑定等。

  2. 使用 knockout 的模板绑定，并添加一个afterRender模板回调来解析元素的文本块并相应地对它们进行数据绑定。

  3. 以上两者的结合。（是的，我知道，这是三个途径。）

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

4

1 回答 1

3

除非您确定要绑定的 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 不能用于不安全的目的。

希望这可以帮助。

于 2012-06-06T16:43:05.573 回答