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