Ember.js - afterRender在CSS完成之前触发

问题描述

在验证正在处理中，我想显示一个加载符号。我的.hbs文件看起来像这样

I'd like to show a loading symbol while my validation is processing. My .hbs file looks like this

<div {{bind-attr class='isProcessing:spinner'}}></div>

我试图将验证包装到afterRender运行循环中，但显然afterRender并不意味着after- CSS。我的验证在div的css类更改之前执行（它根本不改变）。

I tried to wrap my validations into the afterRender run loop, but apparently afterRender doesn't mean after-CSS. My validations are executed before the css class of the div changes (It doesn't change at all).

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渲染完成后，我可以做些什么我的代码开始执行？

What can I do that my code starts to execute after all CSS rendering is done?

我也尝试过Ember.run.next。这也不行。 Ember.run.later的工作时间至少为200ms，但是当然我不想硬编码任何静态时间。

I also tried 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.

更新： strong>这是一个js-fiddle为我的问题：

任何帮助将被抓住！谢谢提前！

Any help would be apprechiated! Thanks in advance!

推荐答案

请将您的代码封装在。像这样：

Please wrap your code in 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');
    }); 
}

我想你的问题是你将 isProcessing 设置为 true 然后立即将其设置为 false ，因为您不等待异步代码/承诺完成。在这种情况下，当解决承诺时，您必须将 isProcessing 设置为false。如果这只是一个承诺，你可以将 isProcessing 设置为 .then（） / 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. In this case you have to set isProcessing to false when promises are resolved. If this is only one promise you can set isProcessing to false inside .then(), for example:

myModel.get('children').then (children) =>
  @set 'isProcessing', false

或者如果您解决多个承诺，或者您解决一个循环中的承诺，您可以使用 Ember.run.debounce最后一次调用此方法后XXXms发生火灾，例如：

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:

finishProcessing: ->
  @set 'isProcessing', false

actions:
  savePost: ->
    myModel.get('children').then (children) =>
      children.forEach (child) =>
        child.then (resolvedChild) =>
          Ember.run.debounce @, 'finishProcessing', 500

这篇关于Ember.js - afterRender在CSS完成之前触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！