我正在尝试使用类似推文的列表项制作演示应用程序,但遇到了问题。我有一个要绑定文本的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

既然我在模板中做错了,我的问题是-我将如何通过使用剔除来实现带有帐户名和时间之前部分的标题?

最佳答案

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

关于javascript - knockout -数据绑定(bind)过度绑定(bind)html元素内的其他元素,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/44366205/

10-12 00:13
查看更多