如何篩選主幹集合並呈現結果

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