淘汰賽

結合文本和HTML這是我要如何構建我的HTML淘汰賽

<a href="#">John <i class="person"></i></a>

而且隨着knockout.js這就是我所做的。

<a data-bind="text:name"><i class="person"></i></a>

正如您可以猜到所有元素錨（不只是文本）被becuse文本在這種情況下錨的內整個標籤被移除結合的去除。我的解決方案在下面。

<a data-bind="html: name() + '<i class="person"></i>'"></a>

在數據綁定中使用字符串連接與html是一種解決方案，但它有兩大缺點。 'name'propery不安全，所以我們可以得到html注入。在數據綁定屬性中很好地寫html是很糟糕的。

另一個解決方案是。

<a href="#"><span data-bind="text:name"></span><i class="person"></i></a>

我知道我們介紹新的html標記的解決方案。這是我發現最好的。

在knockout.js中針對此問題的衆所周知的解決方案是什麼？

我們可以指定只更新文本而不是將其中的整個元素更新爲通過參數進行文本綁定？

還是更好的解決方案？

來源

2012-08-24 Freshblood

使用量程是首選解決方案。如果文本綁定不能替代所有的內容，那麼它很難知道要更新什麼，並且在下次更改時不更新。如果你想總是處理元素的第一個子節點，那麼你可以寫一個小的自定義綁定來幫助。

這是一個簡單的prependText綁定。這將始終替換包含綁定的元素的第一個子節點。所以，你會想確保第一個節點至少有一個空間。

ko.bindingHandlers.prependText = { 
    update: function(element, valueAccessor) { 
     var value = ko.utils.unwrapObservable(valueAccessor()); 
     //replace the first child 
     element.replaceChild(document.createTextNode(value), element.firstChild); 
    }   
};

這樣使用它：

<a href="#" data-bind="prependText: name"> <span> another element</span></a>

樣品：http://jsfiddle.net/rniemeyer/5CfzH/

來源

2012-08-24 13:14:00

這是正確的解決方案。當我使用額外跨度時，我使用的當前主題的行爲有所不同。非常感謝你 – Freshblood

您還可以使用KO 「無容器」符號

<!-- ko text: YourProperty --> 
<!-- /ko-->

這也可以用其他的綁定來實現（如foreach）：See Part 4

來源

2014-01-14 20:35:01 mrtig

回答

相關問題