javascript - Ember JS 嵌套组件冒泡

Question

我在这里创建了一个问题的 fiddle : http://jsfiddle.net/jcarmichael/gFTPN/2/

我使用 Ember JS 应用程序嵌套了组件。

当特定组件上触发事件时，它将其操作发送到下一个组件，然后下一个组件将操作发送到 Controller 。

在组件上的事件期间，它会修改值，这会反射(reflect)在下一个组件和 Controller 上的更改中。

问题在于，只有在事件冒泡之后，值的更改才会出现在下一个组件和 Controller 上。由于在 Controller 中我正在保存模型，这意味着模型会以过时的值保存。

这个问题似乎与此类似: Ember: nested components events bubbling

我尝试将 targetObject 添加到组件中，如图所示，但这似乎没有解决问题。

App = Ember.Application.create();

App.ApplicationController = Ember.Controller.extend({
    value : 1,

    actions : {
        controllerAction : function() {
           // Value shown here is 1, even though it was incremented by the component below
           alert('Value is ' + this.get('value'));   
        }
    }
});

App.Com2Component = Ember.Component.extend({
    value : null,

    actions : {
        sendMe : function() {
          this.sendAction();
          return false;
        }
    }
});

App.Com1Component = Ember.Component.extend({

    value : null,

    click : function() {
       // Increment the value
       this.set('value', this.get('value')+1);  
       this.sendAction();
       return false;
    }
});

Answer 1

我不确定您为什么会遇到这种行为，但我猜测 Ember 会立即传播事件/操作并立即运行其代码，然后运行循环才有机会运行并将更改传播到绑定(bind)值。

一个解决方案:http://jsfiddle.net/a2XUY/

   self = this;
   Ember.run.scheduleOnce('afterRender', function(){self.sendAction()});

我已将 sendAction 包装在 Ember.run.scheduleOnce 中，这意味着它只会在下一个运行循环有机会通过应用程序传播属性更新后运行。

更多引用:http://emberjs.com/guides/understanding-ember/run-loop/