Question

我使用的是Ember 1.13.3（截至2015-07-16的最新版本）。

我有一个以这种方式定义的组件：

window.Promise = window.Promise || Ember.RSVP.Promise

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

import Ember from 'ember';

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

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

{{yield}}

我希望看到标签链接：嘿你......唉。但是我明白了：嘿你......（没有argh）。

这里有一个类似的主题：Accessing component scope within template block

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

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

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

谢谢，拉嘎

Answer 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}}

Answer 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将值发送到父控制器，并在父控制器中执行操作以捕获它并根据需要对其进行操作。

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

2 个答案: