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

Question

我试图从 productsView 中的 menusCollection 获取数据。我正在尝试在一个 backbone 视图中从多个获取的集合中加载数据。所以我真的很挣扎，如果有任何帮助，我将不胜感激。

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 %>
<% }) %>

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

已编辑，它正在运行，但它是在一个视图中处理多个集合的好方法？

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

您还创建了一个具有错误模型值的视图 - 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();
    });
});

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

I can't get data from multiple collections inside one backbone view using lodash _.template

javascript

backbone.js

lodash