Question

下面的绑定的工作原理是它按预期创建了li和元素，但由于某种原因，不会创建嵌套在a元素中的i元素。如何告诉knockout创建嵌套的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/

Answer 1

问题在于您的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.

Knockout foreach不会创建子元素

1 个答案: