javascript - Knockout - 数据绑定(bind)覆盖 html 元素内的其他元素

Question

我正在尝试制作一个带有类似推文的列表项的演示应用程序，但我遇到了问题。我有一个 h4 元素，我想将文本绑定(bind)到该元素，并且其中也有一些 span 元素，但只显示绑定(bind)的文本，而 h4 元素内的其他元素被覆盖。 这是我想做的有问题的部分:

这就是我尝试通过 knockout 实现它的方式:

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

由于我在模板中做错了，我的问题是 - 如何使用 knockout 来实现包含帐户名称和时间之前部分的标题？

Answer 1

text绑定(bind)会替换元素的所有内容。这意味着“嵌套”文本绑定(bind)没有意义。 (或文本绑定(bind)元素内的任何其他绑定(bind))。

要解决您的具体问题，您可以添加另一个 <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-->