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元素内的其他元素

回答

相关问题