Backbone.js 木偶节点ItemView尝试在获取init完成之前呈现模板

更新

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

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试图使用没有数据的模型呈现其模板，但找不到模型字段。给我下面的错误

未捕获引用错误：未定义groupname

是否有延迟渲染的方法，或者ItemView是否像CollectionsView那样具有未记录的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',
  '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;
});

我也有类似的问题

将触发渲染，因为正在传递对象。在拿到提货之前

---

我通常的解决方法是在提取对象之前为模板需要的任何内容设置一个空白默认值。

也有类似的问题

将触发渲染，因为正在传递对象。在拿到提货之前

---

我通常的解决方法是在提取对象之前为模板需要的任何内容设置一个空白默认值。

提取，然后在您知道数据准备就绪时进行渲染。使用承诺让它变得简单，因为主干已经获取了回报承诺

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

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

---

当您知道数据已准备就绪时，提取并渲染。使用承诺让它变得简单，因为主干已经获取了回报承诺

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

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

---

看看木偶。异步。它的设计目的是使

show

能够处理异步请求。@tkone我试图使用异步模块，但项目的其余部分停止工作。它似乎是全有或全无类型。此外，我将覆盖一个将与RequireJS和文本模板一起工作的TemplateCache。。。所以这也很奇怪。我将继续研究异步模块，看看我是否错误地使用了它。它的设计目的是使

show

能够处理异步请求。@tkone我试图使用异步模块，但项目的其余部分停止工作。它似乎是全有或全无类型。此外，我将覆盖一个将与RequireJS和文本模板一起工作的TemplateCache。。。所以这也很奇怪。我将继续查看异步模块，看看我是否错误地使用了它。您还可以将fetch修改为，而不是从id中获取。如果id未设置，则由某个可访问（命名空间窗口）获取。变量这为我的加载提供了一个思路。我有一个空模板，我将其设置为视图默认模板，然后在模型更改事件中，我用新模板和模型的属性替换视图的$el.html。一切都很好。我认为默认情况下每个视图一个空模板（甚至可能是一个正在加载的throbber图像）对每个视图都会更好。我将把它添加到上面的主要问题中。“我通常的解决方法是在获取对象之前为模板需要的任何东西设置一个空白默认值”一切都很好，但是木偶应该减少样板文件：（它确实……这个“bug”更像是主干的功能，而不是木偶。（它实际上更像是一个预期的操作）您还可以将提取修改为，而不是从id提取。如果id未设置，则通过某个可访问（命名空间窗口）提取变量这给了我一个加载的想法。我有一个空模板，我将其设置为视图默认模板，然后在模型更改事件中，我用新模板和模型的属性替换视图的$el.html。所有这些都很好。我想每个视图都有一个空模板作为默认模板（甚至可能是加载throbber图像）对于每个视图都会更好。我将把它添加到上面的主要问题中。“我通常的解决方法是在获取对象之前为模板所需的任何内容设置一个空白默认值”一切都很好，但是木偶应该减少样板文件：（它确实……这个“bug”更像是主干的功能，而不是木偶。（实际上，这更像是一种有意的行为）

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

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