ember.js - 当 Ember.js 完成加载所有内容时，有没有办法获得回调？

Question

我正在构建一个 Ember.js 应用程序，在渲染/加载所有内容后，我需要进行一些额外的设置。

有没有办法得到这样的回调？谢谢！

Answer 1

视图上还定义了几个可以重载的函数，这些函数将被自动调用。其中包括willInsertElement(), didInsertElement(),afterRender()等。

特别是，我发现didInsertElement()了一个有用的时间来运行在常规面向对象系统中将在构造函数中运行的代码。

Answer 2

您可以使用 的ready属性Ember.Application。

来自http://awardwinningfjords.com/2011/12/27/emberjs-collections.html的示例：

// Setup a global namespace for our code.
Twitter = Em.Application.create({

  // When everything is loaded.
  ready: function() {

    // Start polling Twitter
    setInterval(function() {
      Twitter.searchResults.refresh();
    }, 2000);

    // The default search is empty, let's find some cats.
    Twitter.searchResults.set("query", "cats");

    // Call the superclass's `ready` method.
    this._super();
  }
});

Answer 3

LazyBoy 的答案是你想做的，但它的工作方式与你想象的不同。您问题的措辞突出了有关 Ember 的一个有趣点。

在您的问题中，您指定在呈现视图后需要回调。但是，为了获得良好的“Ember”风格，您应该使用在应用程序初始化后、视图呈现之前触发的“就绪”回调。

重要的概念点是，在回调更新数据模型之后，您应该让 Ember 更新视图。

让 ember 更新视图非常简单。在某些极端情况下，必须使用“didFoo”回调来避免视图中的状态转换闪烁。（例如，避免在 0.2 秒内显示“未找到任何项目”。）

如果这对您不起作用，您还可以调查“onLoad”回调。

Answer 4

您可以为此使用jQuery ajax 回调：

$(document).ajaxStart(function(){ console.log("ajax started")})
$(document).ajaxStop(function(){ console.log("ajax stopped")})

这适用于所有 ajax 请求。

Answer 5

我只是将它放入 Application Route

actions: {
    loading: function(transition, route) {

        this.controllerFor('application').set('isLoading', true);

        this.router.on('didTransition', this, function(){
          this.controllerFor('application').set('isLoading', false);
        });
    }
}

然后在我的模板中的任何地方，我都可以使用 {{#if isLoading}} 启用和禁用加载内容，或者我可以在实际加载操作中添加特殊的 jQuery 事件。

非常简单但有效。