Ember JS最好的方式来显示全屏加载屏幕按钮按下

Question

我是Ember的新手，我希望在用户按下＆＃34;从服务器获取内容时显示全屏覆盖图＆＃34;按钮。

实现这一目标的最佳方法是什么？

Ember是否已提供内置功能？或者唯一的方法是在我的一个模板中有一段HTML，以便在我进行AJAX调用的promise返回时显示/隐藏它？

Answer 1

您可以选择几种方式。

第一个涉及路线变化。传统上讲，如果用户正在点击转换到另一条路线的按钮a separate route can be created to handle this in-between loading experience。

为了简要描述一下，如果你有一个名为foo的路由，创建一个名为foo-loading的兄弟路由及相关模板，将显示一个＆＃34; foo-loading＆＃34;提取事物时的页面状态，然后在事情好的时候解除它。

或者，正如您所暗示的，如果用户的号召性用语意图在同一路线上更新结果，则加载服务可能会有用。在您的应用程序模板中，您可以拥有默认隐藏的加载div。在启动AJAX请求之前，您可以打开加载状态并显示加载div。然后，一旦AJAX调用结算，finally块可能包含隐藏加载div的调用。

后一种方法将涉及主应用程序模板中的有条件加载块，加载服务处理显示和隐藏以及加载模板。

Answer 2

您可以使用ember-modal-dialog创建一个加载屏幕组件，在您等待ajax请求时呈现该组件。

例如：

// view.js
showLoadingScreen: true

// view.html
{{#if showLoadingScreen}}
  {{loading-screen}}
{{/if}}

// loading-screen.html
{{#ember-modal-dialog}}
  <div class="loader-full-screen-class"></div>
{{/modal-dialog}}

组件/ ember-modal-dialog的优点是这个模式通常实现为模式，这个库是ember中的标准。然后，该组件可以将它放在您需要的任何位置。