Passing template html as attribute to Ember component

Question

Right now I have an Ember component that generates markup for a modal popup. I'd like to pass some HTML to the component (in the form of component attributes) that will be assigned to the modal's content body. Something like this would be ideal:

Route Template: app/templates/section1.hbs

<div class="content">

    <h1>Section 1</h1>

    {{my-modal myContent}}

</div>

Modal Template: app/components/my-modal/template.hbs

<div id="my-modal">

    <div class="modal-dialog">

        <div class="modal-content">

            <div class="modal-body">

                {{myContent}}

            </div>

        </div>

    </div>

</div>

The content I want to display in the modal's body is static and specific to the current template.

I don't want to have this myContent html set in a controller, if possible, or in the route's model hook.

UPDATE: Additionally, would also prefer not to use Block params/syntax as I have so much HTML that would need to go between the blocks, that it would interrupt the flow of the main template markup.

<p>Something in my template worthy of an informational modal {{#my-modal icon=icon}}
    //A ton more markup here to be added to modal body
{{/my-modal}. More text in my template's markup ...</p>

Ideally, I could just set this html in the route's template. Currently this is my workaround that requires appending a javascript template to the desired element after didInsertElement.

Is there a better way to accomplish this, like setting a local handlbars template variable to some html (inside app/templates/section1.hbs)?

Current Solution/Workaround:

Route Template: app/templates/section1.hbs

<script type="text/template" id="my-content">

    <h1>Hello Ember!</h1>
    <p> Welcome to components </p>

</script>

<div class="content">

    <h1>Section 1</h1>

    {{my-modal}}

</div>

Component JS: app/components/my-modal/component.js

import Ember from 'ember';

export default Ember.Component.extend({

    tagName:    'div',
    classNames: 'modals',

    didInsertElement: function() {

        this.$('#my-modal .modal-body').append($('#my-content').html());

    };
});

Modal Template: app/components/my-modal/template.hbs

<div id="my-modal">

    <div class="modal-dialog">

        <div class="modal-content">

            <div class="modal-body">

                //jQuery will append template content here

            </div>

        </div>

    </div>

</div>

TameBadger TameBadger · Accepted Answer · 2016-04-26T22:29:26

Are you familiar with yielding in a component ?

You could simply try the following.

// templates/components/model-component.hbs

<div id="my-modal">

    <div class="modal-dialog">

        <div class="modal-content">

            <div class="modal-body">

                {{yield}}

            </div>

        </div>

    </div>

</div>

And then using the component as follows:

// routes/application.hbs

{{#modal-component}}

 //your special content here

{{/modal-component}}

With your highly dynamic content, a possible solution could be using the component helper, which allows you to load the relevant component.

You can read about it here . Guides link to follow.

A quick code reference follows

{{component contentView content=myContent}}

Passing template html as attribute to Ember component

1 Answers