javascript - ノックアウトJSforeachデータバインディングおよびネスト要素

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>