[英]Ember.js - afterRender fires before CSS is finished
I'd like to show a loading symbol while my validation is processing. 我想在验证过程中显示加载符号。 My .hbs file looks like this
我的.hbs文件看起来像这样
<div {{bind-attr class='isProcessing:spinner'}}></div>
I tried to wrap my validations into the afterRender run loop, but apparently afterRender doesn't mean after-CSS. 我试图将验证包装到afterRender运行循环中,但显然afterRender并不意味着after-CSS。 My validations are executed before the css class of the div changes (It doesn't change at all).
我的验证是在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);
});
}
}
});
What can I do that my code starts to execute after all CSS rendering is done? 完成所有CSS渲染后,我的代码开始执行该怎么办?
I also tried Ember.run.next. 我也尝试了Ember.run.next。 This doesn't work either.
这也不起作用。 Ember.run.later works with a timeout of at least about 200ms but of course I don't want to hardcode any static timespan.
Ember.run.later的超时时间至少约为200毫秒,但是我当然不想对任何静态时间跨度进行硬编码。
UPDATE: Here is a js-fiddle for my problem: http://jsfiddle.net/4vp2mxr0/2/ 更新:这是我的问题的小提琴: http : //jsfiddle.net/4vp2mxr0/2/
Any help would be apprechiated! 任何帮助将不胜感激! Thanks in advance!
提前致谢!
Please wrap your code in Ember.run.next . 请将您的代码包装在Ember.run.next中 。 Like this:
像这样:
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. 它按预期工作。 I think your problem is that you set
isProcessing
to true
and then immediately set it to false
, because you don't wait for async code/promises to complete. 我认为您的问题是您将
isProcessing
设置为true
,然后立即将其设置为false
,因为您不必等待异步代码/承诺完成。 In this case you have to set isProcessing
to false when promises are resolved. 在这种情况下,必须在解决承诺
isProcessing
设置为false。 If this is only one promise you can set isProcessing
to false
inside .then()
, for example: 如果这只是一个承诺,则可以在
isProcessing
.then()
内部将isProcessing
设置为false
,例如:
myModel.get('children').then (children) =>
@set 'isProcessing', false
Or if you resolve multiple promises, or you resolve promises inside a loop, you can use Ember.run.debounce which will fire after XXXms after last call to this method, for example: 或者,如果您解决了多个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
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.