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

Question

我想在处理验证时显示加载符号。我的 .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/

任何帮助将不胜感激!提前致谢!

Answer 1

请将您的代码封装在 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