Javascript 我能'；t使用lodash模板从一个主干视图中的多个集合获取数据

我试图从

产品视图
中的
菜单集合
获取数据。我试图在一个主干视图中加载来自多个获取集合的数据。所以我真的很挣扎，我会非常感激任何帮助

router.js:

app_router.on('route:products', function() {
     var menusCollection = new MenusCollection();
     menusCollection.fetch();
     var productsCollection = new ProductsCollection();
     productsCollection.fetch({
         success: function () {
                 var productsView = new ProductsView({model:productsCollection.models},{menu:menusCollection.models});
                 productsView.render();
          }
      });
});

var menusCollection = new MenusCollection();
var products = this.model;
var productsCollection = new ProductsCollection(products);
this.el.innerHTML =  _.template( productsTemplate, {data:  menusCollection.toJSON()});

app_router.on('route:products', function() {
    var menusCollection = new MenusCollection();
    menusCollection.fetch({
        success: function () {
               var productsCollection = new ProductsCollection();
               productsCollection.fetch({
                   success: function () {
                      var productsView = new ProductsView({model:productsCollection.models, collection:menusCollection.models});
                      productsView.render();
                    }
                 });
        }
    });
 });

var products = this.model;
var menus = this.collection;
var menusCollection = new MenusCollection(menus);
var productsCollection = new ProductsCollection(products);
this.el.innerHTML =  _.template( productsTemplate, {data:  productsCollection.toJSON(), menus:  menusCollection.toJSON()});

ProductsView.js:

app_router.on('route:products', function() {
     var menusCollection = new MenusCollection();
     menusCollection.fetch();
     var productsCollection = new ProductsCollection();
     productsCollection.fetch({
         success: function () {
                 var productsView = new ProductsView({model:productsCollection.models},{menu:menusCollection.models});
                 productsView.render();
          }
      });
});

var menusCollection = new MenusCollection();
var products = this.model;
var productsCollection = new ProductsCollection(products);
this.el.innerHTML =  _.template( productsTemplate, {data:  menusCollection.toJSON()});

app_router.on('route:products', function() {
    var menusCollection = new MenusCollection();
    menusCollection.fetch({
        success: function () {
               var productsCollection = new ProductsCollection();
               productsCollection.fetch({
                   success: function () {
                      var productsView = new ProductsView({model:productsCollection.models, collection:menusCollection.models});
                      productsView.render();
                    }
                 });
        }
    });
 });

var products = this.model;
var menus = this.collection;
var menusCollection = new MenusCollection(menus);
var productsCollection = new ProductsCollection(products);
this.el.innerHTML =  _.template( productsTemplate, {data:  productsCollection.toJSON(), menus:  menusCollection.toJSON()});

然后在productsTemplate中，我想呈现多个集合，如：

<% _.each( data, function( product, i ){ %>
    <%= product.product_title %>
<% }) %>

<% _.each( data, function( menu, i ){ %>
    <%= menu.menu_title %>
<% }) %>

还是像这样

   app_router.on('route:products', function() {
       var menusCollection = new MenusCollection();
       var productsCollection = new ProductsCollection();
       $.when( menusCollection.fetch(), productsCollection.fetch() ).done(function () {
            var productsView = new ProductsView({model:productsCollection.models, collection:menusCollection.models});
            productsView.render();
        });

    });

ProductsView.js:

app_router.on('route:products', function() {
     var menusCollection = new MenusCollection();
     menusCollection.fetch();
     var productsCollection = new ProductsCollection();
     productsCollection.fetch({
         success: function () {
                 var productsView = new ProductsView({model:productsCollection.models},{menu:menusCollection.models});
                 productsView.render();
          }
      });
});

var menusCollection = new MenusCollection();
var products = this.model;
var productsCollection = new ProductsCollection(products);
this.el.innerHTML =  _.template( productsTemplate, {data:  menusCollection.toJSON()});

app_router.on('route:products', function() {
    var menusCollection = new MenusCollection();
    menusCollection.fetch({
        success: function () {
               var productsCollection = new ProductsCollection();
               productsCollection.fetch({
                   success: function () {
                      var productsView = new ProductsView({model:productsCollection.models, collection:menusCollection.models});
                      productsView.render();
                    }
                 });
        }
    });
 });

var products = this.model;
var menus = this.collection;
var menusCollection = new MenusCollection(menus);
var productsCollection = new ProductsCollection(products);
this.el.innerHTML =  _.template( productsTemplate, {data:  productsCollection.toJSON(), menus:  menusCollection.toJSON()});

产品模板

<% _.each( data, function( product, i ){ %>
    <%= product.product_title %>
<% }) %>

<% _.each( menus, function( menu, i ){ %>
    <%= menu.menu_title %>
<% }) %>

看起来这是一个常见的XHR问题。
您必须等待，直到收集将使用来自服务器的数据填充。因此，只要在获取数据后呈现模板即可：

menusCollection.fetch({context: this}).done(function () {
  this.el.innerHTML = _.template(productsTemplate, {data: menusCollection.toJSON()});
});

另外，您正在创建一个模型值错误的视图-
新产品视图（{model:productsCollection.models}）。它应该是一个主干模型，但在您的示例中，它是一组集合模型。如果要将集合传递给视图，请使用
collection
property name

如果我是你，我会这样写：

var ProductsView = Backbone.View.extend({
    initialize: function (options) {
        this.menusCollection = options.menusCollection;
    },
    render: function () {
        this.$el.html(_.template(productsTemplate, {
            data: this.collection.toJSON(),
            menus: this.menusCollection.toJSON()
        }));
    }
});

app_router.on('route:products', function () {
    var menusCollection = new MenusCollection();
    var productsCollection = new ProductsCollection();

    $.when(menusCollection.fetch(), productsCollection.fetch()).done(function () {
        var productsView = new ProductsView({
            menusCollection: menusCollection,
            collection: productsCollection
        });
        productsView.render();
    });
});

谢谢你的回答。。。我有错误
无法设置未定义的属性'innerHTML'
@Makromat这是由于上下文的原因，请尝试
menusCollection.fetch（{context:this}）
现在请查看我已经在模板中呈现了产品。但如何在同一模板或视图中也呈现菜单？谢谢同样，我知道render MenuCollection，但我不知道如何使用productsCollection…@Makromat查看更新的答案。希望你能明白，@muistooshort我已经编辑了代码。。。你是说像这样吗？是否可以在一个视图中呈现三个集合？或者这完全是个坏主意？谢谢你的帮助！