Question

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

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

我试图将我的验证包装到afterRender运行循环中，但显然afterRender并不意味着在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毫秒，但我当然不想硬编码任何静态时间跨度。

更新：这是我的问题的一个小问题：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，因为您不会等待异步代码/承诺完成。在这种情况下，您必须在解决承诺时将isProcessing设置为false。如果这只是一个承诺，您可以在isProcessing内将false设置为.then()，例如：

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

或者如果你解决了多个promises，或者你在循环中解决了promises，你可以使用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

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

1 个答案: