0

我有一个 div#game。在这里，我希望出现一些来自服务器的数据。因此，当我使用初始化函数时，我会通过 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 并设置为 async: false。现在它全部按照我编程/想要的顺序加载。

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

4

1 回答 1

1

您可以将其作为 a 传递给 View，而不是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();
  }

或者，您可以像这样使用全局 Backbone 事件对象：

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

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

于 2013-07-15T15:16:32.953 回答