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

这不起作用，因为'a data-bind =“text：name，...”'会覆盖图像。

这有意义吗？有没有一个很好的方法来实现这个目标？

Answer 1

如何定义这样的链接？

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

Answer 2

您可以使用knockout的容器减去语法来实现此目的。

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

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

2 个答案: