nested嵌套组件冒泡

Question

我在这里制造了一个问题的小提琴：http://jsfiddle.net/jcarmichael/gFTPN/2/

我有一个Ember JS应用程序的嵌套组件。

当事件在特定组件上被触发时，它会将其操作发送到下一个组件，然后将动作发送给控制器。

在组件上的事件期间，它修改值，这反映在下一个组件up和控制器上的更改中。

问题是，对值的更改似乎发生在下一个组件up上，并且控制器只有在事件冒泡之后才会发生。因为在控制器中，我要保存模型，这意味着使用过时的值保存模型。

这个问题似乎类似于这个问题：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会立即传播事件/操作，并在runloop有机会运行和传播绑定值的更改之前立即运行它们的代码。

一种解决方案：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/

Answer 2

解决此问题的一个解决方案是将this.get('value') + 1作为参数传递给this.sendAction()调用。本质上，单击函数变成

click: function() {
  this.sendAction(this.get('value') + 1);
}

因此，在保存模型之前，操作会产生气泡，以保存所需的参数。