backbone.js - Marionette ItemView 尝试在 init 中的获取完成之前渲染模板

Question

更新

我已经为我的项目创建了一个解决方法。我设置一个空模板作为此 View 的默认模板(实际上包含加载消息和 throbber，以防出现任何进一步的延迟)，并设置模型更改事件以在准备就绪时将 View $el html 替换为 groupTemplate。这在我的开发、测试和生产环境中实现了无缝过渡，但是，如果在检索模型数据时生产速度变慢，它实际上会显示加载消息。

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

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

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

Uncaught ReferenceError: groupname is not defined

有没有办法延迟渲染，或者 ItemView 是否有像 colletionsView 一样未记录的空 View ？如果有更好的方法来处理这个问题，请告诉我。

路由器 Controller

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

对项目 View 进行分组

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