0

我有两个视图......我需要将数据从一个视图放到下一个视图，但我不知道如何实现这一点。

有第一个功能视图：

var CategoriesView = Backbone.View.extend({ 
    initialize:function () {
    this.render();
},
render:function () {
    var that = this;
    var categories = new Categories();
    categories.fetch({
        success: function (categories) {
        var template = _.template($('#categories-template').html(), {categories: categories.models});
          that.$el.html(template);
        }
    })
}             
});

有模板：

    <script type="text/template" id="categories-template">
        <% _.each(categories, function(category) { %>
            <li><%= category.get('name') %></li> 
        <% }); %>
    </script>

型号和收藏：

var Category = Backbone.Model.extend({
defaults: {
    name: 'Category',
    id: []
},
});
var Categories = Backbone.Collection.extend({
url: 'api/categories.json'
});

我拥有的 json 对象（所有类别）中的所有名称：

<li>there</li>

...对于我需要实施产品的每个类别 .... 我有产品清单：

var ProductsView = Backbone.View.extend({ 
    initialize:function () {
    this.render();
},
render:function () {
    var that = this;
    var products = new Products();
    products.fetch({
        success: function (menus) {
        var template = _.template($('#products-template').html(), {products: products.models});
          that.$el.html(template);
        }
    })
}             
});

模板 ：

    <script type="text/template" id="products-template">
        <% _.each(products, function(product) { %>
                <li class="productscls"><%= product.get('name') %></li> 
        <% }); %>
    </script>

型号和coollection：

var Product = Backbone.Model.extend({
defaults: {
    name: 'Product',
    category: 1,
    id: []
},
});
var Products = Backbone.Collection.extend({
url: 'api/products.json'
});

所有这些我的东西都显示正确，但是当我尝试在那里做类似的事情时：

    <script type="text/template" id="categories-template">
        <% _.each(categories, function(category) { %>
                <li class="categorycls"><%= category.get('name') %></li>
            <% _.each(products, function(product) { %>
                    <li class="productscls"><%= product.get('name') %></li>
            <% }); %>
        <% }); %>
    </script>

所以你可以看到我想做什么。对于每个类别的每个产品，但如果不将数据传递到类别或产品视图中，这将不起作用......

问候 Makromat

4

1 回答 1

0

我想你会想要围绕 Category 和 Product 视图做一个父包装视图，然后是子视图。我也会在初始化方法中进行获取，而不是在渲染中。我认为您可以做的是使用类别视图来呈现一个元素，该元素具有所有类别以及每个产品的占位符（按 ID）。然后将其用作产品视图的模板，迭代每个产品并将其插入到匹配的（按 Id）类别占位符元素中。那可以工作。相当复杂的东西。这有意义吗？

另一个想法可能是“扁平化”这种关系的数据库视图。然后将一个 BB 视图与基于该数据库视图的集合一起使用。

由于不知道类别中有多少产品，第二个想法可能很难。第一个想法肯定会奏效。构建一个模板，其中每个类别都带有 Id 标记的占位符，然后将其作为模板传递给产品视图，在每个类别 ID 占位符处插入产品列表。

于 2013-08-20T16:01:49.627 回答