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

Adding Preloader: Integrating NProgress.js with ember.js with ember data

本文关键字：集成 js ember 数据 数据集 NProgress 加载 添加      更新时间：2023-09-26

我试图实现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;
  }
});
相关文章：