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）。

（三）Knockout 控制流程