添加预加载器：将 NProgress.js 与 ember.js 与 ember 数据集成答案

【问题标题】：Adding Preloader: Integrating NProgress.js with ember.js with ember data添加预加载器：将 NProgress.js 与 ember.js 与 ember 数据集成
【发布时间】：2013-10-20 13:16:33
【问题描述】：

当 ember 试图从服务器加载数据时，我试图用 ember.js 实现 NProgress.js 一个进度条 jquery 库。我可以在 Ember 中使用 Jquery Post 成功地做到这一点，但是，当使用 Model.find() 加载数据时，我不知道如何使用 ember 数据来实现。

用户只需添加

NProgress.start();

在活动开始时和

NProgress.done();

活动结束时。

这是我的代码，它与 Jquery Post 方法一起用于在页面中实现 NProgress.js 进度条。

App.LoginController = Ember.Controller.extend({
reset: function(){
    this.setProperties({
        username: "",
        password: "",
        errorMessage: "",
        successMsg: ""
    });
},

login: function(){
    var self =this, data = this.getProperties('username', 'password');
    self.set('errorMessage', null);
    self.set('successMsg', null);
    Ember.$.post('login', data, function(){
        NProgress.start();
    }).then(function(response){
        NProgress.done();
        if(response.success){
            self.set('successMsg', "Successfully Logged In! :)");
            console.log(response.username);
            self.transitionToRoute('about');
        }else {
            self.set('errorMessage', response.message);
            console.log(response.message);
        }
    });

}
});

它工作正常，但我不知道如何使用 ember 数据使用它，所以我确实喜欢下面，但进度条不能正常工作，它只是开始和结束，无论数据是否已加载。

App.AboutRoute = Ember.Route.extend({
model: function() {
    NProgress.start();
    var data;
    if(data = App.Profile.find()){
        NProgress.done();
    }
    return data;
}
});

App.ProfilesRoute = Ember.Route.extend({
model: function(params) {
    NProgress.start();
    var data;
    if(data = App.Profile.find(params.profiles_id)){
        NProgress.done();
    }
    return data;
}
});

我不知道如何实现它，所以我就这样做了。

【问题讨论】：

标签： javascript jquery ember.js ember-data

【解决方案1】：

Ember 数据返回一个 Promise，您可以使用 then 附加代码以在 Promise 之后运行，如下所示：

App.AboutRoute = Ember.Route.extend({
  model: function() {
    NProgress.start();
    var data = App.Profile.find();
    data.then(function(){
      NProgress.done();
    });
    return data;
  }
});

【讨论】：