Question

我知道我非常接近搞清楚这一点。我试图根据喜欢的eq true过滤掉我的收藏。如果我是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
}

如何将过滤后的数据从骨干中的集合传递到视图中

1 个答案: