1

当用户必须等待加载数据时，我想显示一个微调器（正在加载，请稍候..）。

假设加载一些数据需要相当长的时间（1 秒以上）。然后我想显示正在发生某事的视觉反馈，例如当用户通过按下“下一项”进行导航时

http://localhost:9000/#/somedata/1

至

http://localhost:9000/#/somedata/2

我发现了一些关于这个问题的文章，但是，它们似乎都不起作用。此处的文章描述了显示微调器，例如https://gist.github.com/tomdale/3981133。但是，这篇文章已经过时了。我可以通过将 {{#if isLoaded}} 更改为 {{#if content.isLoaded}} 来访问数组的 isLoaded 状态。但是，即使使用 ember-data 获取新数据，content.isLoaded 也始终为“真”。

我发现的另一篇很有前途的文章是Ember.js 的模板加载延迟。但是，同样在转换到另一个 url 时，只有在加载数据后才会显示布局。

我正在使用 ember-data 修订版：12 和 Ember 1.0.0-RC.3。

4

1 回答 1

0

我刚刚使用 jQuery 的ajaxStart和ajaxStop函数以及spin.js的组合实现了一个解决方案。

我在我的 App.ready 函数中运行它：

spinner: ->
opts =
  lines: 13 # // The number of lines to draw
  length: 20 # // The length of each line
  width: 10 # // The line thickness
  radius: 30 # // The radius of the inner circle
  corners: 1 # // Corner roundness (0..1)
  rotate: 0 # // The rotation offset
  direction: 1 # // 1: clockwise, -1: counterclockwise
  color: '#000' # // #rgb or #rrggbb or array of colors
  speed: 1 # // Rounds per second
  trail: 60 # // Afterglow percentage
  shadow: true # // Whether to render a shadow
  hwaccel: false # // Whether to use hardware acceleration
  className: 'spinner' # // The CSS class to assign to the spinner
  zIndex: 2e9 # // The z-index (defaults to 2000000000)
  top: 'auto' # // Top position relative to parent in px
  left: 'auto' #// Left position relative to parent in px

target = document.getElementById('centre')
spinner = new Spinner(opts)
$( document ).ajaxStart( =>
  spinner.spin(target)
)
$( document ).ajaxStop( =>
  spinner.stop()
)

center 是一个空的居中 div，用于定位微调器：

#centre{style: "position:fixed;top:50%;left:50%"}

ajaxStart 的好处是它可以跟踪并发下载。ajaxStart 在第一次调用开始时触发，ajaxStop 仅在所有 ajax 调用完成时才调用。它提供了一个很好的微调器体验。

于 2014-01-17T13:23:33.393 回答