骨干木偶布局和复合视图未呈现

Question

我有一个包含许多子视图的视图。我的计划是使用 Marionette 的布局对象作为骨架视图，如下所示：

define([
  'app',
  'views/orders/list',
  'text!templates/orders/main.html'
],
function (app, ListView, template) {
  'use strict';

  var View = Backbone.Marionette.Layout.extend({
      template : _.template(template),

      id : 'orders',

      regions : {
          list : '#list'
      },

      initialize : function () {
          this.listView = new ListView({
            collection : this.collection
          });

          // And render it here? Seems like a bad idea.
          this.list.show(this.listView);
      }
  });

  return View;
});

ListView 是我创建的复合视图：

define([
    'app',
    'views/orders/list-item',
    'text!templates/orders/list.html'
],
function (app, ListItem, template) {
  'use strict';

  var View = Backbone.Marionette.CompositeView.extend({
    template : _.template(template),

    itemView : ListItem,
    itemViewContainer : '.items',
  });

  return View;
});

问题是当我将 listView 传递给该区域时，它不会使用我的集合中的项目列表呈现。它只呈现包装器。如果我直接调用 listView 上的 render 方法并检查元素...一切都正确构造。

布局代码是否会阻止复合视图正确呈现？我在错误的地方渲染吗？也许这甚至不是工作子视图的正确方法？

任何帮助表示赞赏！

注意：出于测试目的，集合是由硬编码值组成的。

Answer 1

在你初始化 Layout 的时候它的 HTML 还没有渲染，改变 Layout 的 onRender 函数的初始化代码，那个时候 HTML（区域）就会在那里

var View = Backbone.Marionette.Layout.extend({
  template : _.template(template),

  id : 'orders',

  regions : {
      list : '#list'
  },

  onRender: function () {
      this.listView = new ListView({
        collection : this.collection
      });

      // And render it here? Seems like a bad idea.
      this.list.show(this.listView);
  }

});