Ember，在更改路由后显示微调

当用户必须等待数据加载时，我想显示一个微调（加载，请稍候..）。Ember，在更改路由后显示微调

让我们假设加载一些数据需要相当长的时间（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。但是，在转换到另一个网址时，只有在数据加载后才显示布局。

我正在使用烬数据修订：12和Ember 1.0.0-RC.3。

来源

2013-05-13 Daniel

也相关的是这个问题：https：//github.com/emberjs/ember.js/issues/1830 – Daniel 2013-05-13 16:40:47

我刚刚实施了一个解决方案，使用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() 
)

中心是定位微调空中心的div：

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

约ajaxStart的好处是，它跟踪并发下载。 ajaxStart在第一次调用开始时触发，而ajaxStop仅在所有ajax调用完成时调用。它使得一个不错的微调体验。

来源

2014-01-17 13:23:33

Ember，在更改路由后显示微调

回答

相关问题