如何过滤主干集合并呈现结果

Question

Backbone 的新手，如果这是一个简单的问题，请道歉。

我已经成功加载了一个集合并渲染了视图。但是，我有一个带有 A 标签的下拉列表，我想使用过滤器来显示数据。我试图在我的 VIEW 中设置一个事件侦听器，然后在视图中触发一个函数来过滤结果并重新渲染视图。

这是我的代码：

IBA.NewsModel = Backbone.Model.extend({});
IBA.NewsCollection = Backbone.Collection.extend({
    model: IBA.NewsModel,
    url: "/news/api"
});
IBA.NewsView = Backbone.View.extend({
  el: '#main',
  template: _.template($("#news-article").html()),

  events: {
    "change .dropdown-item": "filterNews"
  },

  initialize: function () {
    this.collection = new IBA.NewsCollection();
    this.listenTo(this.collection, 'reset', this.render);
    this.collection.fetch({
      success: function() {
        console.log("JSON file load was successful");
        view.render();
      },
      error: function(){
        console.log('There was some error in loading and processing the JSON file');
      }
    });
  },

  render: function () {
      this.$el.html(this.template({ 
        articles: this.collection.toJSON() 
      })
    );
    return this;
  },

  filterNews: function (e){
    e.preventDefault();
    var items = this.collection.where({cat_name: "interviews"});
    console.log(items);
    this.$el.html(this.template({articles: this.items.toJSON()}));
  }
});

var view = new IBA.NewsView();

Answer 1

最简单的方法是使用过滤结果重置实际集合：

IBA.NewsModel = Backbone.Model.extend({});
IBA.NewsCollection = Backbone.Collection.extend({
  model: IBA.NewsModel,
  url: "/news/api"
});
IBA.NewsView = Backbone.View.extend({
  el: '#main',
  template: _.template($("#news-article").html()),

  events: {
    "change .dropdown-item": "filterNews"
  },

  initialize: function() {
    this.collection = new IBA.NewsCollection();
    this.listenTo(this.collection, 'reset', this.render);
    this.fetchNews();
  },
  fetchNews: function() {
    var view = this;
    this.collection.fetch({
      success: function() {
        console.log("JSON file load was successful");
        view.render();
      },
      error: function() {
        console.log('There was some error in loading and processing the JSON file');
      }
    });
  },
  render: function() {
    this.$el.html(this.template({
      articles: this.collection.toJSON()
    }));
    return this;
  },

  filterNews: function(e) {
    e.preventDefault();
    this.collection.reset(this.collection.where({
      cat_name: "interviews"
    }));
  }
});

var view = new IBA.NewsView();

---

当您想返回原始数据时，请使用fetchNews() 方法再次获取它。

您还有一个语法错误，即 view 未在您的 initialize 中定义