Knockout 控制流程

Posted 2021-02-05 tangge

foreach

迭代数组

foreach binding主要作用于lists或是tables内数据单元的动态绑定。下面是一个简单的例子：

 <table>
        　　<thead>
        　　　　<tr>
        　　　　　　<th>First Name</th>
        　　　　　　<th>Last Name</th>
        　　　　</tr>
        　　</thead>
        　　<tbody data-bind="foreach: people">
        　　　　<tr>
        　　　　　　<td data-bind="text: firstName"></td>
        　　　　　　<td data-bind="text: lastName"></td>
        　　　　</tr>
        　　</tbody>
        </table>
    <script type="text/javascript">
      var myViewModel = {
        people: [
          { firstName: "Chiaki", lastName: "Izumi" },
          { firstName: "Kazusa", lastName: "Touma" },
          { firstName: "Haruki", lastName: "Murakami" }
        ]
      };
      ko.applyBindings(myViewModel);
    </script>

添加 / 删除的实例

在上述示例中，我们简单的在ko.applybindings中添加了一个数组并将其绑定在一个tbody元素中，我们也可以自定义一个view model来实现这一效果，下面是一个更为复杂一些的例子:

  <h4>People</h4>
    <ul data-bind="foreach: people">
      <li>
        Person at position <span data-bind="text: $index"></span>:
        <span data-bind="text: name"></span>
        <a href="#" data-bind="click: $parent.removePerson">Remove</a>
      </li>
    </ul>
    <button data-bind="click: addPerson">Add</button>
    <script type="text/javascript">
      function MyViewModel() {
        var self = this;

        self.people = ko.observableArray([
          { name: "Chiaki" },
          { name: "Yuki" },
          { name: "Kazusa" }
        ]);

        self.addPerson = function() {
          self.people.push({ name: "New name at " + new Date() });
        };

        self.removePerson = function() {
          self.people.remove(this);
        };
      }

      ko.applyBindings(new MyViewModel());
    </script>

使用 “as” 的别名为 “foreach” 项目

在注意一中提到，我们能够通过$data来调用foreach绑定的数组本身，但是当我们使用嵌套的foreach，内层foreach如何能够调用外层foreach绑定的数组呢？这时我们可以借由as给外层foreach所绑定的数组定义一个另外的名称，进而在内层foreach中利用此名称来调用外层foreach所绑定的数组。接下来是一个简单的例子：

    <ul data-bind="foreach: { data: person, as: 'person' }">
      <li>
        <ul data-bind="foreach: { data: friends, as: 'friends' }">
          <li>
            <span data-bind="text: person.name"></span>:
            <span data-bind="text: friends"></span>
          </li>
        </ul>
      </li>
    </ul>

    <script>
      var viewModel = {
        person: ko.observableArray([
          { name: "Chiaki", friends: ["Charlie", "Kazusa"] },
          { name: "Kazusa", friends: ["Chiaki", "Charlie"] },
          { name: "Charlie", friends: ["Chiaki", "Kazusa"] }
        ])
      };

      ko.applyBindings(viewModel);
    </script>

这个例子中的外层foreach绑定的是person数组，person数组中有一个属性name和另外一个数组firends，在内层foreach中绑定的是数组firends。当我们在内层foreach要调用外层的person数组内的属性时，借由as，使用了person.name来调用。而这里也有一个有趣的情况，就是当一个数组里面只有单纯的元素，比如说friends数组，它的元素并不是object，也就不存在这identifier的问题，这时我们要调用它的元素时，只需要调用数组本身即可，这也就是为什么在之前的示例中如果我们调用绑定的数组本身会返回[object, object]。

这表明，一般情况下，遍历数组中的元素只需要调用数组名（as指定）或是调用$data即可，而碰到那些内部元素是object的时候，我们要调用object内的属性则需要调用相应属性的名称。

另外需要注意的一点就是，as后所跟着的必须是一个字符串（as: "person"而不是as: person）。