EmberJS 1.13.3 / 组件 / 块模板 / 访问组件属性答案

【问题标题】：EmberJS 1.13.3 / Component / Block template / access component propertyEmberJS 1.13.3 / 组件 / 块模板 / 访问组件属性
【发布时间】：2015-10-06 12:26:03
【问题描述】：

我使用的是 Ember 1.13.3（截至 2015 年 7 月 16 日的最新版本）。

我有一个这样定义的组件：

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'li',
  yow: 'argh',
});

对应的hbs很简单（默认）：

{{yield}}

我以这种方式使用组件（在我的 application.hbs 中）：

{{#side-menuitem name='medium' current=selectedMenuItem clicked='menuItemSelected'}}
  {{#link-to name}}Hey you ... {{yow}}{{/link-to}}
{{/side-menuitem}}

我希望看到带有标签的链接：嘿，你...啊。但我明白了：嘿，你……（没有啊）。

这里有一个类似的帖子：Accessing component scope within template block

我也尝试过：{{view.yow}} 和 {{component.yow}}，没有运气。看起来 Ember 1.13（仍然）有这种行为：块格式专门将您从组件范围中删除并进入父范围，由于隔离级别，没有任何可用的从父范围到组件的链接。

这是不可取的...，不知何故，我认为这种行为在 1.13 中已经改变（与 2.0 兼容），但我没有看到它（或者我想错了？）。

如何在不弄乱（父）控制器的情况下解决这个问题？

谢谢，拉卡

【问题讨论】：

标签： templates ember.js components

【解决方案1】：

这应该可以，只需将您的模板更改为：

// application.hbs
{{#side-menuitem name='medium' current=selectedMenuItem clicked='menuItemSelected' as |yow|}}
  {{#link-to name}}Hey you ... {{yow}}{{/link-to}}
{{/side-menuitem}}

// component.hbs
{{yield yow}}

【讨论】：

【解决方案2】：

您回答了自己的问题，这就是块组件的工作原理。如果您的需求允许您以非阻塞形式使用此组件，那么它将按照您想要的方式工作：

模板：

// side-menuitem.hbs
<li>
  {{#link-to name}}Hey you ... {{yow}}{{/link-to}}
</li>

脚本：

// side-menuitem.js
import Ember from 'ember';

export default Ember.Component.extend({
  yow: 'argh'
});

使用：

{{side-menuitem name='index' current=selectedMenuItem clicked='menuItemSelected'}}

如果您确实需要将其保留为一个块，那么您找到的其他帖子的建议就是要走的路（数据下降，行动上升）。您可以使用 sendAction 将值发送到父控制器，并在父控制器中执行操作来捕获它并根据需要对其进行操作。

【讨论】：