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的语法错误

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

1 个答案: