Ember JS嵌套组件冒泡

Question

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

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

当在特定组件上触发事件时，该事件将其动作发送到下一个组件，然后依次将动作发送到控制器。

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

问题在于，仅在事件冒泡之后，对值的更改才出现在下一个组件和控制器上。 由于在控制器中我正在保存模型，因此这意味着将使用过期值保存模型。

这个问题似乎与此类似： Ember：嵌套组件事件冒泡

我尝试如图所示将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中，这意味着它仅在下一个runloop有机会通过应用程序传播属性更新后才运行。

更多参考： http ： //emberjs.com/guides/understanding-ember/run-loop/

Answer 2

解决此问题的一种方法是将this.get('value') + 1作为参数传递给this.sendAction()调用。 本质上，点击功能变为

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

因此，在保存模型之前，操作会冒泡保持所需的参数。