javascript - Knockout JS foreach 数据绑定和嵌套元素

Question

我有一个列表，我想生成一个包含图标和文本的链接：

<li><a><img src="icon.png" /> name</a></li>

所以理想情况下，设置看起来像：

<ul data-bind="foreach: list">
    <li>
        <a data-bind="text: name, click: openNavItem"><img data-bind="attr: { src: icon }" /></a>
    </li>
</ul>

然后我通过：

list.push({ name: "name", icon: "theicon.png" });

JS 小提琴示例

这不起作用，因为 'a data-bind="text: name, ..."' 会覆盖图像。

那有意义吗？有没有什么好方法可以做到这一点？

Answer 1

像这样定义一个链接怎么样？

<a href="#"><img data-bind="attr: { src: icon }" /><span data-bind="text: name" /></a>

Answer 2

您可以使用淘汰赛的容器少语法来实现这一点。

<ul data-bind="foreach: list">
    <li>
        <a><img data-bind="attr: { src: icon }" />
        <!--ko text: name--><!--/ko-->
        </a>
    </li>
</ul>