1

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.

runspired
  • 2,642
  • 1
  • 19
  • 24

2 Answers2

2

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

mpowered
  • 13,162
  • 2
  • 15
  • 18
1

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

sandstrom
  • 14,554
  • 7
  • 65
  • 62