Question

绑定列表中的列表时出现noob问题

我正在尝试遵循这个*教程，我在为内部列表呈现数据时遇到了一些麻烦

* http://knockoutjs.com/examples/collections.html

请参阅代码 http://jsfiddle.net/mouseoctopus/K7kcc/

var landing = function () {
  this.displayName = 'Welcome to my ko/Durandal? Data Entry Kit!';
  this.description = 'This ko/Durandal? Data Entry kit demonstrates several basic form scenarios, elements and utilities.';
  this.features = [
      new feature('Scenarios', ['Log-in', 'User Registration', 'Data Entry','Data Entry Wizard' ,'Multiple/Nested VM Data Entry']),
      new feature('Elements', ['Dates', 'Radio Buttons', 'Checkboxes']),
      new feature('Utilites', ['Validation','Field Enable/Disable'])
  ];
};

var feature = function (feature, elements) {
  this.feature = feature;
  this.elements = elements;
}

ko.applyBindings(landing);

HTML

<ul data-bind="foreach: features">
   <li data-bind="text: feature">
     <ul data-bind="foreach: elements">
         <li data-bind="text:$data"></li>
     </ul>
 </li>
</ul>

Answer 1

text绑定将li内的所有内部标记替换为文本，因此

<ul data-bind="foreach: features">
   <li data-bind="text: feature">
     <ul data-bind="foreach: elements">   <!-- this tags are ignored -->
         <li data-bind="text:$data"></li> <!-- this tags are ignored -->
     </ul>                                <!-- this tags are ignored -->
 </li>
</ul>

等于

<ul data-bind="foreach: features">
   <li data-bind="text: feature"></li>
</ul>

因此，如果您有嵌套标签，则不能对li使用文本绑定使用像

这样的东西

<ul data-bind="foreach: features">
    <li>
       <span data-bind="text: feature"></span>
       <ul data-bind="foreach: elements">
           <li data-bind="text:$data"></li>
        </ul>
    </li>
</ul>

JSFiddle DEMO

Answer 2

你的问题是属性data-bind =“text：feature”重写内部逻辑

在五个版本

上查看js feedle示例的工作修复

[FIX](http://jsfiddle.net/K7kcc/5/)

嵌套列表绑定

2 个答案: