2

更新

我为我的项目创建了一个解决方法。我将一个空模板设置为此视图默认模板（实际上包含加载消息和 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 正在尝试使用没有数据的模型来呈现它的模板，并且无法找到模型字段。给我以下错误。

未捕获的 ReferenceError：未定义组名

有没有办法延迟渲染，或者 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;
});
4

2 回答 2

3

当您知道您的数据已准备好时，获取并呈现。使用 Promise 来简化主干获取返回 Promise 的过程。

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

  fetching.done(function() { that.render(); });
}
于 2012-12-12T16:58:40.823 回答
1

有类似的问题

Backbone Marionette 在获取完成前显示

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

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

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

于 2012-09-12T20:48:44.390 回答