主干过滤产品在每个类别中(过滤器参数将是类别名称）

Backbone filter products in each category ( Filter parameter will be category name )

本文关键字：参数 过滤器 别名 过滤      更新时间：2023-09-26

>我有两个集合视图。此视图呈现来自 products.json 的每个对象，以及从 categories.json 到 <li><%= title %></li> 的每个对象。现在我想渲染每个类别包括类别中的每个产品......

//！所有类别视图 

App.Views.Categories = Backbone.View.extend({
    tagName: 'ul',
    className: 'categories',
    initialize: function() {
      this.collection.on('add', this.addOne, this);  
    },
    render: function() {
      this.collection.each( this.addOne, this );
      return this;
    },
    addOne: function(category) {
        var categoryView = new App.Views.Category({ model: category });
        this.$el.append(categoryView.render().el);
    },
});

//！单一类别视图

App.Views.Category = Backbone.View.extend({
    tagName: 'li',
    className: 'category',
    template: template('allCategoryTemlate'),
    initialize: function() {
      this.model.on('destroy', this.unrender, this);
      this.model.on('change', this.render, this);
    },
    render: function() {
      this.$el.html( this.template( this.model.toJSON() ) );
      return this;
    },
});

//！所有产品视图

App.Views.Products = Backbone.View.extend({
    tagName: 'ul',
    className: 'products',
    initialize: function() {
      this.collection.on('add', this.addOne, this);  
    },
    render: function() {
      this.collection.each( this.addOne, this );
      return this;
    },
    addOne: function(product) {
        var productView = new App.Views.Product({ model: product });
        this.$el.append(productView.render().el);
    },
});

//！单一产品视图

App.Views.Product = Backbone.View.extend({
    tagName: 'li',
    className: 'product',
    template: template('allProductTemlate'),
    initialize: function() {
      this.model.on('destroy', this.unrender, this);
      this.model.on('change', this.render, this);
    },
    render: function() {
      this.$el.html( this.template( this.model.toJSON() ) );
      return this;
    },
});

我的产品：

[   
    {"product_id": 1, "category": "CATEGORY1", "title": "Product 1", "price": 12},
    {"product_id": 2, "category": "CATEGORY1", "title": "Product 2", "price": 12},
    {"product_id": 3, "category": "CATEGORY1", "title": "Product 3", "price": 12},
    {"product_id": 4, "category": "CATEGORY2", "title": "Product 4", "price": 12},
    {"product_id": 5, "category": "CATEGORY2", "title": "Product 5", "price": 12}
]

我的类别：

[
    {"category_id": 1, "value": "CATEGORY1", "title": "Category 1"},
    {"category_id": 2, "value": "CATEGORY2", "title": "Category 2"},
]

我需要的示例： 

Category 1
    - Product 1 
    - Product 2 
    - Product 3 
Category 2
    - Product 4 
    - Product 5

这对我的申请非常重要，所以我会对每一个意见都非常满意。我可以做这样的东西吗：

var filtered = products.filter(function(product) {
    return product.get('category') == 'and there I need value from category ?';
});

或者在模板中类似：

<% _.each(categories, function(category) { %>
    <%= category.get('title') %>
    <li><%= title %></li>
    <% _.filter(products, function(product){ %>
        <%= return product category == value; %>
            <%= product.get('title') %>
            <% }); %> 
        <% }); %>
    <% }); %> 
<% }); %>

谢谢！！！

对于简单的过滤，请使用"where"：

var Products = Backbone.Collection.extend({});
var products = new Products(
    [ {"product_id": 1, "category": "CATEGORY1", "title": "Product 1", "price": 12},
    {"product_id": 2, "category": "CATEGORY1", "title": "Product 2", "price": 12},
    {"product_id": 3, "category": "CATEGORY1", "title": "Product 3", "price": 12},
    {"product_id": 4, "category": "CATEGORY2", "title": "Product 4", "price": 12},
    {"product_id": 5, "category": "CATEGORY2", "title": "Product 5", "price": 12} ]
);
var cat1 = products.where({'category': 'CATEGORY1' });
console.log(cat1);
相关文章：