javascript - 使用 ember.js 和 ember 数据添加 Preloader : Integrating NProgress. js

Question

当 ember 尝试从服务器获取数据时，我试图使用 ember.js 实现 NProgress.js 进度条 jquery 库。我可以在 Ember 中使用 Jquery Post 成功完成此操作，但是，当 ember 使用 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;
}
});

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

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