javascript - 我无法使用 lodash _.template 从一个主干 View 内的多个集合中获取数据

Question

我尝试从 productsView 内的 menusCollection 获取数据。我正在尝试在一个主干 View 中从多个获取的集合中加载数据。所以我真的很挣扎，如果有任何帮助，我将非常感激。

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中我想渲染多个集合，例如:

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

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

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

已编辑，它正在工作，但是，这是在一个 View 中处理多个集合的好方法吗？

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

产品模板

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

此外，您还使用错误模型值创建 View - new ProductsView({model:productsCollection.models});。它应该是 Backbone.Model 但在您的示例中它是集合模型的数组。如果要将集合传递给 View ，请使用 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();
    });
});