Backbonejs将数据从一个视图传递到另一个视图?

时间:2013-08-19 16:24:18

标签: json backbone.js

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

有第一个功能视图:

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>

模型和冷却:

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

1 个答案:

答案 0 :(得分:0)

我认为您希望围绕“类别”和“产品”视图执行父包装视图,然后是子视图。我也会在初始化方法中进行提取,而不是在渲染中。我认为您可以使用“类别”视图来呈现一个元素,该元素包含具有Id的每个产品的占位符的所有类别。然后将其用作Product视图的模板,迭代每个Product并将其插入匹配(通过Id)Category占位符元素。那可能有用。很复杂的东西。这有意义吗?

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

第二个想法可能很难,因为不知道这些类别中有多少产品。第一个想法一定会奏效。构建一个模板,其中包含带有Id标记占位符的每个类别,然后将其作为模板传递到产品视图,在每个Category Id占位符处插入Products列表。