Question

我是Backbone的新手，并且一直在测试过滤和渲染集合的不同方法。我正在构建一个简单的待办事项应用程序。我的模型看起来像这样：

{ description: "go for a hike", display: "show" }

我想使用搜索框根据他们的“描述”属性过滤我的待办事项。

截至目前，在每个'keyup'上我遍历我的集合，看看每个模型的描述是否包含搜索框的值。如果模型不包含搜索框的值，那么我将其“display”属性更改为“hide”，否则我将其保留/更改为“show”。

在我更改了每个模型实例上的'display'属性后，我再渲染我的集合。 collectionView仅渲染“display”属性===“show”

的模型

事实证明这很慢。任何人都可以建议一种更好的方法来过滤和渲染每个'keyup'上的集合吗？

以下是过滤器代码：

  filterResults: function() {
    // value respresents the value of the search-box
    var value = this.$el.val();
    todoList.forEach( function (item) {
      if (item.get('description').indexOf(value) > -1) {
        item.set({display: 'show'});
      }else {
        item.set({display: "hide"});
      }
    });
    todoListView.render();
  }

这是CollectionView代码：

TodoListView = Backbone.View.extend({
  addOne: function(todoItem) {
    if (todoItem.get('display') === "show") {
      var todoView = new TodoView({model: todoItem});
      todoView.render();
      this.$el.append(todoView.el);
    }
  },
  render: function() {
    this.$el.html("");
    this.collection.forEach(this.addOne, this);
  },

感谢您的反馈，谢谢！

Answer 1

你有两个foreach集团，根据你的集合大小，它可能有点慢......

在模型上执行设置时，可以调用render（）吗？这样你就避免了一个foreach。也许你可以改变你如何检查你的模型是否具有'show'属性，如果你真的专注于性能，尝试比较int而不是string。

我建议您使用http://www.datatables.net/，它是一个非常好的插件，可能会帮助您。

希望它有所帮助。

Answer 2

我认为设置display属性并将其用于过滤是个不错的主意。您可以这样使用filter功能：

var filteredList = todoList.filter(function(item) {
  return item.get('description').indexOf(value) > -1;
});

这将为您提供已过滤的列表，然后您可以将其发送到render函数。此外，如果您的集合大小不是很大，过滤和渲染应该不是问题。您始终可以为过滤器文本设置一些最小长度（可能是3）。

Backbone中的过滤和渲染

2 个答案: