Knockout - 数据绑定克服了html元素中的其他元素

Question

我正在尝试使用类似推文的列表项创建一个演示应用，但我遇到了一个问题。我有一个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>

或者，如果您不想要额外的<span>，则可以使用virtual binding：

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