1

以下のバインドは、期待どおりに li 要素と a 要素を作成するという点で機能しますが、何らかの理由で a 要素内にネストされた i 要素が作成されません。ネストされた i 要素を作成するようにノックアウトに指示するにはどうすればよいですか?

フィドル: http://jsfiddle.net/TJdhW/3/はこれを示しています。li アイテムはアイコンなしで作成されます。

<script>
    $(function () {
        var item = function (p) {
            self = this;
            self.property = ko.observable(p);
        }
        var data = ko.observableArray([]);

        var test = new item("one");


        data().push(new item("one"));
        data().push(new item("two"));
        data().push(new item("three"));

        var vm = {
            data : data
        }


        ko.applyBindings(vm);
    });
</script>


<ul class="nav nav-tabs">
    <li><a href="#home" data-toggle="tab" style="background-color: maroon;">ePM</a></li>
    <li><a href="#home" data-toggle="tab"><i class="icon-list"></i></a></li>
    <li><a href="#home" data-toggle="tab"><i class="icon-bar-chart"></i></a></li>

    <!-- ko foreach: data-->
    <li><a href="#home" data-toggle="tab" data-bind="text: property"><i class="icon-list" style="margin-right: 2px"></i></a></li>
    <!-- /ko -->

    <li><a href="#home" data-toggle="tab"><i class="icon-list" style="margin-right: 1px;"></i><i class="icon-plus"></i></a></li>
    <li><a href="#home" data-toggle="tab"><i class="icon-bar-chart" style="margin-right: 1px;"></i><i class="icon-plus"></i></a></li>
</ul>

http://jsfiddle.net/TJdhW/3/

4

1 に答える 1

2

問題はdata-bind="text: property"、aリンクのコンテンツ全体を置き換える要素にあるため、アイコンが削除され、propertyプロパティの値のみが表示されます。

アンカー内のテキストとアイコンの両方をデータbind="text: property"内に移動するにはa(span要素上など):

 <!-- ko foreach: data-->
        <li><a href="#home" data-toggle="tab" >
            <span data-bind="text: property"></span>
            <i class="icon-list" style="margin-right: 2px" ></i>
            </a>
        </li>
 <!-- /ko -->

JSFiddle のデモ。

于 2013-07-02T07:16:28.353 に答える