初始化后的主干渲染 - 初始化 get 触发到早期？

Question

我有一个div#game。在这里，我希望显示来自服务器的一些数据。因此，当我使用 initialize 函数时，我通过 ajax 调用从游戏模型中的服务器请求数据。

Game = Backbone.View.extend(
{
    id: 'game',
    initialize: function ()
    {
        this.model.on('getGame', function() {});
        this.model.getGame();
    }
}

由于回调似乎在主干中不起作用，因此必须触发。因此，应用会侦听触发器getGame当来自服务器的数据返回并保存到模型中的变量中时触发。

到目前为止一切顺利，这一切都有效。现在唯一的问题是我希望我的div#game 在完成从 getGame 函数附加所有数据后淡入。

但我认为是因为在 model.on(trigger( 之外，初始化函数在运行 getGame(( 函数后"认为"它已经准备好了，而实际上还没有附加来自服务器的数据。

因此，父div#all 运行以下内容：

this.$el.append(new Game().el);

还"认为"div#game 已经准备就绪，并将div#game 附加到自身并使其淡入。

div#game还没有包含服务器数据，所以当它真正回来时，图像和文本会弹出，而不是很好地淡入......

有人知道如何解决这个问题吗？提前感谢！

====

==========================================================

解决

问题出在 $.get 和 $.post 函数的异步属性中。这就是为什么初始化在结果从服务器返回之前就已经准备好了。我把它改成$.ajax，并做了异步：假。现在它都按照我编程/想要的顺序加载。

感谢您对 Tallmaris 的详细解释，它肯定会派上用场，因为我将使用很多触发器！

Answer 1

与其让div#all渲染视图并将其附加到自身，不如将其作为视图的parent传递给视图：

this.gameView = new Game({parent: this});

然后在您的Game视图中：

initialize: function (options)
  this.parent = options.parent
  {
    this.model.on('getGame', function() { this.$el.appendTo(this.parent); });
    this.model.getGame();
  }

或者，您可以使用全局主干事件对象，如下所示：

window.vent = $.extend({}, Backbone.Events);

现在你有一个全局对象(你可以根据需要命名并放入任何命名空间中，不要像上面的代码那样做(，你可以像这样使用它：

主视图：

initialize: function () {
    vent.on("GameReady", function () 
      { 
        // fade in game view
      }); 
}

游戏视图：

initialize: function (options)
  this.parent = options.parent
  {
      this.model.on('getGame', function() { vent.trigger("GameReady"); });
      this.model.getGame();
  }

您还可以传递参数。阅读此处了解更多文档。