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 回答