如何將過濾的數據傳遞到主幹中的集合視圖

Question

我知道我非常接近解決這個問題。我試圖過濾掉我的收藏根據如果最喜歡的eq真實。如果我console.log - 我可以看到它正在做它的工作。但它並沒有更新我的觀點。

任何人都知道我失蹤或做錯了什麼？

這裏是我的代碼：

var Products = Backbone.Model.extend({ 
    // Set default values. 
    defaults: { 
     favorite: false 
    } 
}); 

var ProductListCollection = Backbone.Collection.extend({ 
    model: Products, 
    url: '/js/data/wine_list.json', 
    parse: function(data) { 
     return data; 
    }, 
    comparator: function(products) { 
     return products.get('Vintage'); 
    }, 
    favoritesFilter1: function(favorite) { 
     return this.filter(function(products) { 
      return products.get('favorite') == true; 
     }); 
    }, 
    favoritesFilter: function() { 
     return this.filter(function(products) { 
      return products.get('favorite') == true; 
     }); 
    }, 

}); 


var products = new ProductListCollection(); 

var ProductListItemView = Backbone.View.extend({ 

    el: '#wine-cellar-list', 
    initialize: function() { 
     products.bind('reset', this.render, this); 
     products.fetch(); 
     this.render(); 
    }, 
    render: function() { 
     console.log(this.collection); 
     var source = $('#product-template').html(); 
     var template = Handlebars.compile(source); 
     var html = template(this.collection.toJSON()); 
     this.$el.html(html); 
     return this; 
    }, 
}); 

// Create instances of the views 
var productView = new ProductListItemView({ 
    collection: products 
}); 

var CellarRouter = Backbone.Router.extend({ 
    routes: { 
     '': 'default', 
     "favorites": "showFavorites", 
     "purchased": "showPurchased", 
     "top-rated": "showTopRated", 
    }, 
    default: function() { 
     productView.render(); 
    }, 
    showFavorites: function() { 
     console.log('Favorites'); 
     productView.initialize(products.favoritesFilter()); 
    }, 
    showPurchased: function() { 
     console.log('Purchased'); 
    }, 
    showTopRated: function() { 
     console.log('Top Rated'); 
    } 

}); 


$(function() { 
    var myCellarRouter = new CellarRouter(); 
    Backbone.history.start(); 

}); 

Answer 1

有沒有在你的代碼中的許多錯誤，我會盡力澄清最讓我可以：

您的收藏應該僅僅是這樣的：

var ProductListCollection = Backbone.Collection.extend({ 
    model: Products, 
    url: '/js/data/wine_list.json', 
    comparator: 'Vintage' // I guess you want to sort by this field 
}); 

您的看法是這樣的：

var ProductListItemView = Backbone.View.extend({ 
    el: '#wine-cellar-list', 
    initialize: function() { 
     this.collection.bind('reset', this.full, this); 
     this.collection.fetch(); 
    }, 
    full: function() { 
     this.render(this.collection.models); 
    }, 
    favorites: function(favorite) { 
     this.render(this.collection.where(favorite)); // here's the answer to your question 
    }, 
    render: function(models) { 
     console.log(models); 
     var source = $('#product-template').html(); 
     var template = Handlebars.compile(source); 
     var html = template(models.toJSON()); // You may have to change this line 
     this.$el.html(html); 
     return this; 
    }, 

}); 

並在你的路由器上：

showFavorites: function() { 
    console.log('Favorites'); 
    productView.favorites(true); // or false, as you like 
}