我无法使用lodash从一个骨干视图中的多个集合中获取数据_.template

Question

我试图从menusCollection中获取productsView中的数据。我试图在一个骨干视图中从多个抓取的集合中加载数据。所以我真的很挣扎，我会很乐意帮助你。

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(); 
      } 
     }); 
}); 

ProductsView.js：

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

然后在productsTemplate我想渲染多个colections，如：

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

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

我的模板已加载，但没有收集数据。我怎么才能得到它 ？ 非常感谢！

EDITED，它正在工作，但它是在一个视图中处理多个集合的好方法？

router.js：

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(); 
        } 
       }); 
     } 
    }); 
}); 

或类似这样的东西吗？

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：

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(menus, function(menu, i){ %> 
    <%= menu.menu_title %> 
<% }) %> 

Answer 1

看起来就像是一个常见的问题XHR。 您必须等待，直到收集将填充来自服务器的数据。所以，简单地呈现模板一次的数据将被提取：

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

你也正在创造一个错误模型值的视图 - new ProductsView({model:productsCollection.models});。它应该是一个Backbone.Model，但在你的例子中它是一个集合模型的数组。如果要将集合传递给视图，请使用collection属性名称。

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

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(); 
    }); 
});