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

在初始化布局时，其HTML尚未呈现，更改初始化代码，布局的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);
  }

}）;

Backbone Marionette布局和复合视图不渲染

1 个答案: