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

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

problematic place

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

knockout problem

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

tweet item

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

<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

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

來源

2017-06-05 gfels

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-->

來源

2017-06-05 10:51:44 user3297291

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

回答

相關問題