CODEWITHSUNDEEP
ember.jshtmlbars
runspired
runspired

Reputation: 2693

How do I expose a component via block params in Ember 1.10 + HTMLBars

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.

Upvotes: 1

Views: 1583

Answers (2)

sandstrom
sandstrom

Reputation: 15092

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

Upvotes: 1

mpowered
mpowered

Reputation: 13526

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

Upvotes: 2

Related Questions