Ember.js

Question

我想在验证过程中显示加载符号。我的 .hbs 文件看起来像这样

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

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

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，因为你没有等待asynccode/promises完成。在这种情况下，您必须在解决承诺时将 isProcessing 设置为 false。如果这只是一个承诺，您可以在 .then() 中将 isProcessing 设置为 false，例如：

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

或者，如果您解析多个承诺，或者您在循环内解析承诺，您可以使用 Ember.run.debounce，它将在最后一次调用此方法后的 XXX 毫秒后触发，例如：

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 完成之前触发

Ember.js - afterRender fires before CSS is finished

javascript