我想在处理验证时显示加载符号。我的 .hbs 文件如下所示
<div {{bind-attr class='isProcessing:spinner'}}></div>
我尝试将验证包装到 afterRender 运行循环中,但显然 afterRender 并不意味着 after-CSS。我的验证是在 div 的 css 类更改之前执行的(它根本没有更改)。
App.PostController = Em.Controller.extend({
isProcessing: false,
actions: {
savePost: function() {
this.set('isProcessing', true);
Ember.run.scheduleOnce('afterRender', this, function() {
// do a lot of validating and other (non-asynchronous) stuff here
// ... this may take several seconds
this.set('isProcessing', false);
});
}
}
});
我该怎么做才能让我的代码在所有 CSS 渲染完成后开始执行?
我还尝试了 Ember.run.next。这也行不通。 Ember.run.later 的超时时间至少约为 200 毫秒,但我当然不想硬编码任何静态时间跨度。
更新:这是解决我的问题的js-fiddle:http://jsfiddle.net/4vp2mxr0/2/
任何帮助将不胜感激!提前致谢!
最佳答案
请将您的代码封装在 Ember.run.next 中。像这样:
savePost: function() {
this.set('isProcessing', true);
Em.run.next(this, function() {
//just some synchronous code that takes some time (the time inbetween the two alerts)
var i=0,a;
alert('start code');
while (i++ < 10000000) {
a = Math.pow(i, Math.pow(1/i, Math.sin(i)))/3/4/5/5 * Math.log(i);
}
this.set('isProcessing', false);
alert('finished code');
});
}
It works as intended.我认为你的问题是你将 isProcessing
设置为 true
然后立即将其设置为 false
,因为你不等待异步代码/ promise 完成。在这种情况下,当 promise 得到解决时,您必须将 isProcessing
设置为 false。如果这只是一个 promise ,您可以在 .then()
内将 isProcessing
设置为 false
,例如:
myModel.get('children').then (children) =>
@set 'isProcessing', false
或者,如果您解决了多个 Promise,或者您在循环内解决了 Promise,则可以使用 Ember.run.debounce它将在上次调用此方法后 XXXms 后触发,例如:
finishProcessing: ->
@set 'isProcessing', false
actions:
savePost: ->
myModel.get('children').then (children) =>
children.forEach (child) =>
child.then (resolvedChild) =>
Ember.run.debounce @, 'finishProcessing', 500
关于javascript - Ember.js - afterRender 在 CSS 完成之前触发,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28116138/