如何通过 Ember 1.10 + HTMLBars 中的块参数公开组件答案

【问题标题】：How do I expose a component via block params in Ember 1.10 + HTMLBars如何通过 Ember 1.10 + HTMLBars 中的块参数公开组件
【发布时间】：2015-04-18 15:31:21
【问题描述】：

使用块参数，我认为以下方法可以将组件公开给嵌套控件，而无需 _yield hack。

{{#my-component as |myparam|}}
    {{log myparam}}
{{/my-component}}

这似乎不起作用，因为此日志返回未定义。

我正在使用 ember-cli 0.1.15 ember 1.10.0 和 ember-cli-htmlbars 0.7.4。我需要做些什么来启用块参数，还是这不是正确的表示法？

更新

作为示例用法，请考虑带有幻灯片和控制按钮的灵活轮播。

{{#carousel-component as |carousel|}}
    {{#slide-component}}
      <button {{action "nextSlide" target=carousel}}>Next</button>
    {{/slide}}
{{/carousel-component}}

具体来说，这是尝试严格使用 Ember 1.10 中可用的新 block params 语法来解决此用例。

【问题讨论】：

标签： ember.js htmlbars

【解决方案1】：

根据http://emberjs.com/blog/2015/02/07/ember-1-10-0-released.html，看起来新语法需要通过组件的yield 帮助程序传递的块参数。我制作了一个 JSBin 来说明：

http://emberjs.jsbin.com/jacosewefu/4/edit

【讨论】：

@runspired 更新了我的答案，看起来{{yield}} 需要变成{{yield controller}} :-)

【解决方案2】：

将整个组件作为块参数传递符合隔离原则，因此除非有特殊原因，否则请改为传递特定参数。

将此作为组件的模板：

{{yield context}}

然后，正如你所写：

{{#carousel-component as |carousel|}}
    {{#slide-component}}
      <button {{action "nextSlide" target=carousel}}>Next</button>
    {{/slide}}
{{/carousel-component}}

更多关于区块参数的信息：
http://emberjs.com/blog/2015/02/07/ember-1-10-0-released.html#toc_block-params

【讨论】：