javascript - 在 Knockout 中过滤 observableArray

Question

我坚持在 Knockout 中过滤 observableArray。我正在显示一个人员列表，并希望有一个复选框列表，该复选框可以根据选中的复选框实时更新人员列表(例如:年龄:18 -22、23-30、31-36 等。 )

I read Ryan Niemeyer's关于效用函数的文章，但我仍然很困惑。我不知道如何使用过滤后的项目更新可观察数组。

我正在使用 Durandal和 DozerJS这是我目前拥有的标记和 shell 文件

<section class="main">
  <div class="main--contain">
    <a data-bind="click: find25to35">Between 25 and 35</a>

    <form>
        <input type="search" name="search" placeholder="Search" class="search-input">
    </form>

    <ul class="user-list" data-bind="foreach: people">
        <li>
            <h2 data-bind="text: username"></h2>
            <h2 data-bind="text: firstname + lastname"></h2>
        </li>
    </ul>
</div>

define(['knockout'], function (ko) {

  var ctor = {
    people: ko.observableArray(),

    activate: function () {
      var self = this;

      var request = $.ajax({
        url: '/api/users/',
        type: 'GET'
      });

      request.done(function (res) {
        if (res.data.length) {
          res.data.reverse();
          for (var i = 0, z = res.data.length; i < z; i++) {
            self.people.push(res.data[i])
          }
        }
      })
    },

    find25to35: function () {
      var self = this;

      self.people = [];

      ko.utils.arrayForEach(self.people(), function(person) {
        if (person.age >=18 && person.age <=25) {
          self.people.push(person);
        }
      });
}
  };

  return ctor;

});

Answer 1

以下行将不起作用...

<h2 data-bind="text: firstname + lastname"></h2>

knockout 很聪明，但并不那么聪明。您需要像这样向您的个人 View 模型添加一个计算可观察对象...

function Person(person) {
    var self = this;

    self.username = ko.observable(person.userName);
    self.firstname = ko.observable(person.firstName);
    self.lastname = ko.observable(person.lastName);
    self.age = ko.observable(person.age);
    self.name = ko.computed(function () {
        return self.firstname() + self.lastname();
    });
}

这会将您的绑定(bind)更改为...

<ul class="user-list" data-bind="foreach: people">
    <li>
        <h2 data-bind="text: username"></h2>
        <h2 data-bind="text: name"></h2>
    </li>
</ul>

然后您可能想要添加一个筛选人员列表，加载所有符合条件的人，首先从所有人开始，然后清除它并重新加载符合您条件的人。如果有人想通过一套新的标准来找人怎么办？您真的要再次调用 AJAX 来获取每个人吗？我的经验是，除非您正在运行复杂的自定义搜索，否则最好只获取一次数据并让用户对其进行操作。这意味着您最终会得到一个与此类似的数组...

filteredPeople: ko.observableArray([]),

// -- your other relevant code goes here ---

find25to35: function () {
  var self = this;

  // set how many people are currently in array
  var count = filteredPeople().length;

  // loop through array to get rid of all elements to clear it,
  // making sure we're not modifying the collection as we are 
  // iterating through it which creates pointer errors
  for (var i = 0; i < count; i++) {
      filteredPeople().pop();
  }

  ko.utils.arrayForEach(self.people(), function(person) {
      if (person.age() >= 25 || person.age() <= 35) {
          filteredPeople.push(person);
      }
  });
}

不要忘记 Knockout observables 上的括号，因为这些 observables 实际上是返回对象的方法，您希望它们返回您放入其中的内容，而不是用于跟踪其当前值的缩小(或完整)方法这将导致 Undefined 错误。哦，当您应用绑定(bind)时，为了安全起见，因为您使用的是顶级函数，所以您可能需要像这样添加对它的引用...

<a data-bind="click: $root.find25to35">Between 25 and 35</a>

并且您的人员列表的绑定(bind)会更改以反射(reflect)过滤...

<ul class="user-list" data-bind="foreach: filteredPeople">

最后，考虑使该函数更具动态性，以便能够将其重新用于其他搜索条件，否则您将违反 DRY principle .考虑以下...

<a data-bind="click: $root.findByAge($data, minAge, maxAge)">Find By Age</a>

... 并以此为基础使您的输入具有功能性和可重用性。请记住，如果您使用 jQuery 来获取它们的值，则它们不需要在表单中。

编辑说明:意识到我忘记清除正确的可观察对象并且没有注意到方法中的年龄不正确导致了所有的麻烦。代码已修复。