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

Question

我试图在ember试图从服务器装载数据时使用ember.js实现NProgress.js进度条jquery库。我可以在Ember中成功使用Jquery Post，但是，当使用Model.find（）加载数据时，我不知道如何使用ember数据实现此类功能。

用户只需要添加

NProgress.start（）;

在事件的beginnig和

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

} 
}); 

它工作正常，但我不知道如何使用烬数据使用它，所以我不喜欢，但下方的进度条不正常工作，它只是开始和结束，无论数据已经加载或不。

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

灰烬数据返回一个承诺，你可以将代码中使用then像这样一个承诺后运行：

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