CODEWITHSUNDEEP
ember.js
Toran Billups
Toran Billups

Reputation: 27399

How to inject a dynamic partial using ember components?

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)

Upvotes: 3

Views: 837

Answers (1)

Kalman
Kalman

Reputation: 8121

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

Upvotes: 2

Related Questions