以編程方式將Knockout綁定應用於文本塊中的特定標記

我有一塊html標記，我想使用Knockout JS將數據綁定到div。這很簡單，與淘汰賽html綁定。以編程方式將Knockout綁定應用於文本塊中的特定標記

我想要做的是根據它們的類有條件地綁定該HTML標記中的子元素。這些元素可以出現在html標記的任何地方，因爲它們是內聯元素（如span,a標籤等）。

這樣做的目的是將點擊事件數據綁定到該文本塊中的特定單詞或短語，以便我可以調用一個函數（在這種情況下，是一個帶有目標詞或短語定義的模式）。

有誰知道如何做到這一點？從我所看到的，我有兩個主要途徑來探討：

使用jQuery搶按類元素，並以某種方式對數據綁定，然後在事後。我不知道這是否會爲各種工作原因 - 不具有DOM準備好了，不能夠在數據綁定那個方法等
使用淘汰賽的template binding，並添加一個afterRender模板回調解析文本塊的元素和數據綁定相應地。
上述兩者的組合。（是的，我知道，那是三條途徑。）

有沒有人做過類似這樣的事情？如果可能的話，我希望得到您的建議和反饋。謝謝！

來源

2012-06-06 jedd.ahyoung

我不認爲這是可能的，因爲當'ko.applyBindings（）'被調用時綁定需要存在。 – Tyrsius

@ lunchmeat317 - 我可以想辦法用自定義綁定來實現，但如果html內容已更新，則可能會出現重複的appyBindings。你計劃更新內容還是一次性顯示？ – madcapnmckay

@madcapnmckay這是一次性綁定;顯示內容後不應更新。我沒有考慮過自定義綁定 - 你將如何使用該方法解決這個問題？ –

我不推薦這種方法，除非您確定您綁定的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-06 16:43:05 madcapnmckay

我們正在接收來自安全來源的HTML - 一種CMS應該在發送前清理所有內容。不過，我會考慮再保證一點。 –

@ lunchmeat317 - 酷，應該沒問題。如果這回答你的問題，請接受它作爲答案。 – madcapnmckay

這可能會起作用，但我想知道這個問題的含義 - 如果我們決定更新這些方法，我們必須在CMS中隨處更改HTML，這可能並不理想。然而，如果我可以基於一個類有條件地綁定，那麼就會有一個額外的抽象層次...... –

以編程方式將Knockout綁定應用於文本塊中的特定標記

回答

相關問題