Knockout 控制流程

Posted tangge

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Knockout 控制流程相关的知识,希望对你有一定的参考价值。

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 控制流程的主要内容,如果未能解决你的问题,请参考以下文章

使用 Vue 模板清晰地分离视图和代码

VSCode自定义代码片段——git命令操作一个完整流程

VSCode自定义代码片段15——git命令操作一个完整流程

VSCode自定义代码片段15——git命令操作一个完整流程

PHP中的流程控制

在导航控制器中杀死片段