Knockout - 數據綁定覆蓋html元素內的其他元素

Question

我正在嘗試使用類似tweet的列表項目製作演示應用程序，並且遇到了問題。我有一個h4元素，我想要綁定文本並在其中包含一些span元素，但只顯示綁定文本，並且h4元素內的其他元素被覆蓋。 這是問題的一部分，我想打：

這是我得到我想要與淘汰賽來實現它的方式：

的shole項目應看起來像這樣：

模板的特定部分，其中我試圖實現這種標題的：

<h4 class="media-heading" data-bind="text: name"><a><span>@</span><span data-bind="text: name"></span></a><span class="timeAgo"> 4 minutes ago</span></h4> 

撥弄我的應用程序： fiddle

因爲我做錯了模板我的問題是 - 我將如何通過使用淘汰賽實現標題與帳戶名稱和前一部分？

Answer 1

text綁定替換所有元素的內容。這意味着「嵌套」文本綁定沒有意義。 （或文本綁定元素內的任何其他綁定）。

爲了解決特定的問題，您可以添加其他<span>裏面你<h4>：

<h4> 
    <span data-bind="text: name"></span> 
    <a> 
    <span>@</span> 
    <span data-bind="text: name"></span> 
    </a> 
    <span class="timeAgo">4 minutes ago</span> 
</h4> 

個人而言，我打掃一下到：

<h4> 
    <span data-bind="text: name"></span> 
    <a data-bind="text: '@' + name()"></span> 
    <span>4 minutes ago</span> 
</h4> 

或者，如果你不t想要額外的<span>，你可以使用virtual binding：

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