我试图实现NProgress.js一个带有Ember的进度条jquery库.js当Ember试图从服务器获取数据时。我可以成功地在 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;
}
});
我不知道如何实现它,所以我这样做了。
Ember 数据返回一个承诺,您可以使用如下then
附加代码以在承诺后运行:
App.AboutRoute = Ember.Route.extend({
model: function() {
NProgress.start();
var data = App.Profile.find();
data.then(function(){
NProgress.done();
});
return data;
}
});