CODEWITHSUNDEEP
ember.js
3gwebtrain
3gwebtrain

Reputation: 15293

Ember `partial` templating with component

I am trying to use a single component in multiple page with different content. for that, I am trying with partial templating approach. But I find my way is wrong. any one suggest me the correct way?

name of route : my-route and my-service both are using same component called my-component. my component always having some default info too.. but partially how show different content on different page?

my partials are in template partials folder.

here is my try :

<h2>This is my Route page</h2>
{{#my-component}}
 <!-- default content should be here -->
{{partial "partials/my-service-partial"}}
{{/my-component}}

here is my live demo: Live Demo in Twiddle

Upvotes: 0

Views: 447

Answers (1)

Mirko Akov
Mirko Akov

Reputation: 2447

To be able to render the passed block to a component, you should use {{ yield }}, so your component's template should look like:

{{!-- templates/component/my-component.hbs --}}
<div class="parent">
    <h2>Loaded from component default</h2>
    {{ yield }}
</div>

You can find some more information in the guides - Wrapping Content in a Component

Upvotes: 1

Related Questions