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

Question

With block params, I thought the following would work to expose a component to a nested control without need of the _yield hack.

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

This does not appear to work, as this log returns undefined.

I'm using ember-cli 0.1.15 ember 1.10.0 and ember-cli-htmlbars 0.7.4 . Is there something I need to do to enable block params, or is this not the correct notation?

UPDATE

For an example usage, consider a flexible carousel with slides and control buttons.

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

And to be specific, this is an attempt at solving this use case strictly using the new block params syntax available in Ember 1.10.

Answer 1

Per http://emberjs.com/blog/2015/02/07/ember-1-10-0-released.html , it looks like the new syntax needs block params passed via the component's yield helper. I've made a JSBin to illustrate:

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

Answer 2

Passing the entire component as a block-param goes the principle of isolation, so unless there is an exceptional reason, pass specific arguments instead.

Use this as template for your component:

{{yield context}}

Then, as you write:

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

More on block params:
http://emberjs.com/blog/2015/02/07/ember-1-10-0-released.html#toc_block-params