Question

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

我们假设加载一些数据需要相当长的时间（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也始终为“true”。

我发现的另一篇承诺文章是Template loading delay with Ember.js。但是，此处在转换到另一个URL时，只有在加载数据后才会显示布局。

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

Answer 1

我刚刚使用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调用完成时调用。这是一个很好的旋转体验。

Ember，改变路线后显示微调器

1 个答案: