0

そこには2つのビューがあります...あるビューから次のビューにデータを配置する必要がありますが、これをどのように実装できるかわかりません。

最初の関数ビューがあります:

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>

そこで、私が作りたいものを見ることができます。各カテゴリの各製品について、これはカテゴリまたは製品ビューにデータを渡さないと機能しません....

よろしくマクロマット

4

1 に答える 1

0

サブビューである Category ビューと Product ビューの周りに親ラッパー ビューを作成する必要があると思います。また、レンダリングではなく、初期化メソッドでフェッチを行います。できることは、Category ビューを使用して、ID ごとの各製品のプレースホルダーを持つすべてのカテゴリを持つ要素をレンダリングすることだと思います。次に、それを Product ビューのテンプレートとして使用し、各 Product を反復して、一致する (ID による) Category プレースホルダー要素に挿入します。それはうまくいくかもしれません。かなり複雑なもの。これはまったく意味がありますか？

もう 1 つのアイデアは、この関係を「平坦化」するデータベース ビューです。次に、そのデータベース ビューに基づくコレクションで 1 つの BB ビューを使用します。

2 番目のアイデアは、カテゴリ内にいくつの製品があるかわからないため、難しい場合があります。最初のアイデアは間違いなく機能します。Id でマークされたプレースホルダーを持つすべてのカテゴリーを含むテンプレートを作成し、それをテンプレートとして製品ビューに渡し、各カテゴリー Id プレースホルダーに製品のリストを挿入します。

于 2013-08-20T16:01:49.627 に答える