Ember.js 从子组件发送操作并在父组件中捕获它

余烬：1.13.2

我好像没法让它工作

父/子小部件（gridster容器/gridster小部件）

gridster小部件

{{#gridster-container}}
    {{#each model as |widget|}}
        {{#gridster-widget sizeX=widget.sizeX sizeY=widget.sizeY action="addWidget"}}

           ...

        {{/gridster-widget}}
    {{/each}}
{{/gridster-container}}

export default Ember.Component.extend({
  tagName : 'li',
  sizeX : 1,
  sizeY : 1,

  widget : null,

  didInsertElement : function() {
    var sizeX = this.get('sizeX');
    var sizeY = this.get('sizeY');
        //this.get('parentView').addWidget(this, sizeX, sizeY);
    //this.send('addWidget', this, sizeX, sizeY);
    //this.sendAction('action', this, sizeX, sizeY);
    //this.attrs.action(this, sizeX, sizeY);
    //this.get('gridsterContainer').send('addWidget', this, sizeX, sizeY);
    //this.action(this, sizeX, sizeY);
    this.sendAction('action', this, sizeX, sizeY); //I can see this executing in the debugger.
    }

});

在gridster容器组件中，我有以下操作来捕获该操作。

  actions : {
    addWidget : function(widget, sizeX, sizeY) {
      alert('worked'); //This is never called
    }
  },

---

但是，永远不会调用该操作。

当您屈服时，您需要传递

父视图

，这样您的模板就变成：

{{#gridster-container as |gridsterContainer|}}
    {{#each model as |widget|}}
        {{#gridster-widget parentView=gridsterContainer sizeX=widget.sizeX sizeY=widget.sizeY action="addWidget"}}

           ...

        {{/gridster-widget}}
    {{/each}}
{{/gridster-container}}

---

要么这样，要么将

gridster小部件

移动到

gridster container.hbs

中，然后你必须传递模型

{{{{gridster container widgets=model}}}

，并在它们上面循环。

我无法对@Kitler的答案发表评论，但是这个语法对我来说是有效的，在1.13.4版的版本中：

{{#gridster-container as |gridsterContainer|}}
    {{#each model as |widget|}}
        {{#gridster-widget targetObject=gridsterContainer sizeX=widget.sizeX sizeY=widget.sizeY action="addWidget"}}

            ...

        {{/gridster-widget}}
    {{/each}}
{{/gridster-container}}

（

targetObject

代替

parentView

）

---

与他们的回答一样，这假设您的

gridster容器.hbs

包括

{{yield this}

您是否在

gridster容器

模板中屈服？如果是这样，组件是同级的。不确定为什么，但传递的

parentView=gridsterContiner

仍然不起作用。我最终选择了您的第二个选项，并将小部件直接传递到gridster容器中。我将

parent=this

设置到每个小部件中。然后我可以做

this.get（'parent'）.send（'addWidget'，this，sizeX，sizeY）

，它成功了。@jax我将尝试一下并更新答案，这是未经测试的代码，可能语法错误