Question

遗憾的是，我无法弄明白，如何从组件中接收我使用的组件事件。

我的意思实际上听起来比实际上更难，考虑下面的玩具示例，其中一个组件是my-outer而另一个组件是my-inner（一个简短的解释遵循代码，最后我链接到jsbin）。

模板：

<script type='text/x-handlebars' id='components/my-outer'>
  <div {{bind-attr class="isRed:red"}}>Buttons should toggle my background color</div>
  <button {{action "toggleRed"}}>It works from my-outer</button>
  {{my-inner action="toggleRed"}}
</script>

<script type='text/x-handlebars' id='components/my-inner'>
  <button {{action "action"}}>It doesn't work from my-inner</button>
</script>

javascript：

App.MyOuterComponent = Ember.Component.extend({
  isRed: false,
  actions: {
    toggleRed: function() {
       this.toggleProperty("isRed");
    }
  }
});

my-outer包含一个带有背景颜色的短文本，可以通过调用toggleRed操作将其切换为红色。第一个按钮表明这原则上有效。

现在我想将第二个组件的默认操作绑定到同一个toggleRed操作，这是下一行的重点。

{{my-inner action="toggleRed"}}

但是点击第二个按钮（这是我内心的一部分）时会抛出错误并且不会触发操作。

如何修复此示例？

http://emberjs.jsbin.com/cabasuru/2/edit?html,js,console,output

提前非常感谢（这是我的第一个问题，我很高兴任何元评论家）

Answer 1

由于组件的工作方式与视图类似，因此最简单的方法是获取parentView并转发操作。您可能必须像my-inner一样处理此操作。

App.MyInnerComponent = Ember.Component.extend({
  isRed: false,
  actions: {
    toggleRed: function() {
      this.get('parentView').send('toggleRed');
    }
  }

});

您可以在内部组件中看到外部组件可以作为parentView访问。这是工作的jsbin链接 http://emberjs.jsbin.com/cabasuru/5/edit

Answer 2

我的问题实际上错过了主要观点。上面的例子中出现的问题是内部组件中的动作助手

<button {{action "action"}}>It doesn't work from my-inner</button>

不会触发与组件关联的默认操作。相反，它会调用一个名为action的新事件，该事件不允许冒泡（由于组件限制）。

事实证明，有两种方法可以解决这个问题：

在my-inner组件的操作块中正确重新路由事件
```
<button {{action "my-action"}}>...</button>
```
以及my-action的{{1}}操作的定义：
```
my-inner
```
这基本上是@CodeJack提出的想法，区别在于，在这里，我们依赖于布线，该布线在App.MyInnerComponent = Ember.Component.extend({ actions: { myaction: function(){ this.sendAction(); } } });的模板中设置。 http://emberjs.jsbin.com/cabasuru/3/edit
正如@torazaburo暗示的那样，将my-outer组件上的目标属性设置为my-inner组件，允许从操作助手触发的事件绕过组件隔离。
my-outer模板中的
{{my-inner target=controller}}和my-outer模板中的<button {{action "toggleRed"}}>...</button>。

ember.js |如何将子组件的事件绑定到外部组件的操作

2 个答案: