How to inject a dynamic partial using ember components?

Question

I have a simple component that I'd like to provide a hook for dynamically named partials.

ideally I'd like to support this interface

{{my-thing displayPartial="wat"}}

then the user would declare a partial template "-wat.hbs" and it would be included

Currently this is what I'm doing inside the components hbs (that doesn't work)

{{partial displayPartial}}

Edit

or an optional block based version

{{#my-thing}}
<p>{{result.name}}</p>
{{/my-thing}}

then in the component hbs I'd yield this out inside my each loop/etc

{{#each x in controller}}
{{yield}}
{{/each}}

The issue w/ the block version is that I can't seem to pass "result" (ie- yield result blows up)

I believe this may be useful, http://stackoverflow.com/a/17679380/1749024? — dasnixon, Mar 02 '15 at 05:04
This might also work for you... http://stackoverflow.com/questions/27779572/emberjs-registerhelper-to-dynamically-render-a-template-in-ember-1-8/27783464#27783464 — Kalman, Mar 02 '15 at 15:38
@ToranBillups - what are you doing differently? http://emberjs.jsbin.com/zobugu/1/edit?html,output — Kalman, Mar 02 '15 at 15:56

Kalman · Accepted Answer · 2015-03-02T21:01:44.880

You should be able to just do the following:

<script type="text/x-handlebars" data-template-name="index">
  <ul>
  {{#each item in model}}
    {{my-thing displayPartial=item}}
  {{/each}}
  </ul>
</script>

<script type="text/x-handlebars" id="red">
  RED
</script>

<script type="text/x-handlebars" id="_yellow">
  YELLOW
</script>

<script type="text/x-handlebars" id="_blue">
  BLUE
</script>

<script type="text/x-handlebars" id="components/my-thing">
  <div {{ bind-attr class='displayPartial'}}>
    {{ partial displayPartial }}
  </div>
</script>

Also, leading underscores in partial names are no longer required - https://github.com/emberjs/ember.js/issues/2242

Working solution here

How to inject a dynamic partial using ember components?

1 Answers1