EmberJS:应用程序加载路径和模板

时间:2014-07-24 08:00:03

标签: javascript ember.js

当我的应用程序引导并开始使用ember-data从服务器加载数据时,我一直在尝试实现加载指示功能。创建了templates/loading.hbs模板。

到目前为止,应用程序启动时未呈现加载模板,甚至尝试使用{latency: 4000}选项模拟网络延迟。

路由/ application.js中

export default Ember.Route.extend({
  model: function() {
    return this.store.find('items');
  }
});

模板/ loading.hbs

<div class="loading-overlay">
    <div class="spinner"></div>
</div>

图书馆版本

ember-cli 0.0.39
ember 1.6.1
handlebars 1.3.0
ember-data 1.0.0-beta.8

还要感谢Balint Erdi有一个关于EmberJS前端开发的博客http://balinterdi.com/2014/06/18/indicating-progress-loading-routes-in-ember-dot-js.html

解决方案

http://emberjs.com/guides/routing/loading-and-error-substates/的样本 真的很有帮助。

App.LoadingView = Ember.View.extend({
  templateName: 'global-loading',
  elementId: 'global-loading'
});

App.ApplicationRoute = Ember.Route.extend({
  actions: {
    loading: function() {
      var view = this.container.lookup('view:loading').append();
      this.router.one('didTransition', view, 'destroy');
    }
  }
});

任何人都能帮助我吗?

1 个答案:

答案 0 :(得分:1)

您还需要LoadingRouteLoading and error substates)或处理应用程序路径中的加载操作