Question

我在这里创造了一个问题： http://jsfiddle.net/jcarmichael/gFTPN/2/

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

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

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

问题是，对值的更改似乎发生在下一个组件上，而控制器仅在事件冒泡后发生。因为在控制器中我保存模型，这意味着模型以过时的值保存。

问题似乎与此类似： 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中，这意味着它只会在下一个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);
}

因此，在保存模型之前，动作会保留您需要的参数。

Ember JS嵌套组件冒泡

2 个答案: