Нокаут foreach не создает дочерние элементы

Question

Привязка ниже работает так, что она создает элементы li и элементы, как ожидалось, но по какой-то причине элемент i, вложенный внутри элемента a, не создается. Как сообщить нокауту о создании вложенного элемента 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.