添加预加载器:将NProgress.js与ember.js与ember数据集成

时间:2013-10-20 13:16:34

标签: javascript jquery ember.js ember-data

当ember试图从服务器中提取数据时,我试图用ember.js实现NProgress.js进度条jquery库。我可以成功使用Ember中的Jquery Post成功但是,我不知道如何使用Model.find()在ember加载数据时使用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数据使用它,所以我喜欢下面但进度条不能正常工作它只是开始和结束,无论数据是否已加载。 / p>

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

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

1 个答案:

答案 0 :(得分:4)

Ember数据返回一个承诺,您可以使用then附加代码以在承诺之后运行,如下所示:

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