Marionette ItemView 尝试在 init 获取完成之前呈现模板

Question

更新

我为我的项目创建了一个变通方案。我将一个空模板设置为此视图默认模板（实际上包含加载消息和 throbber，以防进一步延迟）并设置模型更改事件以在准备好时用 groupTemplate 替换视图 $el html。这在我的开发、测试和生产机器上实现了无缝过渡，但是，如果在检索模型数据时生产速度变慢，它实际上会显示加载消息。

define([
  'underscore',
  'backbone',
  'marionette',
  'models/group',
  'text!templates/shared/empty.html', // include empty template
  'text!templates/groups/group.html'
], function(_, Backbone, Marionette, groupModel, emptyTemplate, groupTemplate){
  var GroupView = Backbone.Marionette.ItemView.extend({
    initialize: function() {
      var view = this;

      this.model = new groupModel({id:this.options.groupid});

      // listen to the model change and display the real template when fired.
      this.model.on('change', function(){
        view.$el.html(_.template(groupTemplate, view.model.attributes));
      });

      this.model.fetch();
    },
    template: emptyTemplate // display empty template be default
  });
  return GroupView;
});

我有一个使用嵌套列布局（在本例中为三列）的单一布局。嵌套布局使用相应的视图调用，它需要这些视图并将它们显示在它自己的区域中。 （如果有更好的方法，请告诉我）。

我的问题是 col2 的 GroupView（嵌套三列布局）正在使用 ItemView，并且正在使用没有数据可启动的模型。该模型使用 url 而不是从集合中检索数据，因此必须使用 fetch 来检索数据。 ItemView 正在尝试使用没有数据的模型来呈现它的模板，并且无法找到模型字段。给我以下错误。

Uncaught ReferenceError: groupname is not defined

有没有办法延迟渲染，或者 ItemView 有没有像 colletionsView 这样的未记录的 emptyView？如果有更好的处理方法，请告诉我。

路由器控制器

group: function(groupid) {
  // require and setup our three column layout
  require([
    'views/layouts/three-column', 'views/shared/left-user-menu',
    'views/groups/group', 'views/shared/location'
  ], function(threeColumnLayout, leftView, groupView, locationView) {
  App.wrapper.currentView.main.show(new threeColumnLayout({
    views: {
      col1: new leftView(),
      col2: new groupView({groupid: groupid}),
      col3: new locationView()}
  }));
}

嵌套布局（三栏）

define([
  'underscore',
  'backbone',
  'marionette',
  'text!templates/layouts/three-column.html'
], function(_, Backbone, Marionette, threeColumnTemplate) {
  var Layout = Backbone.Marionette.Layout.extend({
    initialize: function(options) {
      var layout = this;

      this.on('render', function(options){
        layout.col1.show(options.options.views.col1);
        layout.col2.show(options.options.views.col2);
        layout.col3.show(options.options.views.col3);
      });
    },
    tagName: 'div',
    template: threeColumnTemplate,
    regions: {
      col1: '#col1',
      col2: '#col2',
      col3: '#col3'
    }
  });

  return Layout;
});

分组项目视图

define([
  'underscore',
  'backbone',
  'marionette',
  'models/group',
  'text!templates/groups/group.html'
], function(_, Backbone, Marionette, groupModel, groupTemplate){
  var GroupView = Backbone.Marionette.ItemView.extend({
    initialize: function() {
      this.model = new groupModel({id:this.options.groupid});
      this.model.fetch();
    },
    template: groupTemplate
  });
  return GroupView;
});

Answer 1

当您知道您的数据已准备好时，获取并呈现。使用 Promise 可以轻松完成，因为主干网已经返回了 Promise。

initialize: function () {
  var that = this;
  var fetching = this.model.fetch();

  fetching.done(function() { that.render(); });
}

Answer 2

有类似的问题

Backbone Marionette Displaying before fetch complete

this.model = new groupModel({id:this.options.groupid});

将触发渲染，因为有一个对象正在传递。在获取之前 ..

我的正常解决方法是在提取水合对象之前为模板所需的任何内容设置空白默认值。