title: Passing template html as attribute to Ember component
body: <p>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:</p>
  
  <p>Route Template: app/templates/section1.hbs</p>
  
  <pre><code>&lt;div class="content"&gt;
  
      &lt;h1&gt;Section 1&lt;/h1&gt;
  
      {{my-modal myContent}}
  
  &lt;/div&gt;
  </code></pre>
  
  <p>Modal Template: app/components/my-modal/template.hbs</p>
  
  <pre><code>&lt;div id="my-modal"&gt;
  
      &lt;div class="modal-dialog"&gt;
  
          &lt;div class="modal-content"&gt;
  
              &lt;div class="modal-body"&gt;
  
                  {{myContent}}
  
              &lt;/div&gt;
  
          &lt;/div&gt;
  
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>The content I want to display in the modal's body is static and specific to the current template.</p>
  
  <p>I don't want to have this <code>myContent</code> html set in a controller, if possible, or in the route's model hook. </p>
  
  <p>UPDATE: Additionally, would also prefer not to use <code>Block</code> 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>
  
  <pre><code>&lt;p&gt;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 ...&lt;/p&gt;
  </code></pre>
  
  <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 <code>didInsertElement</code>. </p>
  
  <p>Is there a better way to accomplish this, like setting a local handlbars template variable to some html (inside app/templates/section1.hbs)? </p>
  
  <p>Current Solution/Workaround:</p>
  
  <p>Route Template: app/templates/section1.hbs</p>
  
  <pre><code>&lt;script type="text/template" id="my-content"&gt;
  
      &lt;h1&gt;Hello Ember!&lt;/h1&gt;
      &lt;p&gt; Welcome to components &lt;/p&gt;
  
  &lt;/script&gt;
  
  &lt;div class="content"&gt;
  
      &lt;h1&gt;Section 1&lt;/h1&gt;
  
      {{my-modal}}
  
  &lt;/div&gt;
  </code></pre>
  
  <p>Component JS: app/components/my-modal/component.js</p>
  
  <pre><code>import Ember from 'ember';
  
  export default Ember.Component.extend({
  
      tagName:    'div',
      classNames: 'modals',
  
      didInsertElement: function() {
  
          this.$('#my-modal .modal-body').append($('#my-content').html());
  
      };
  });
  </code></pre>
  
  <p>Modal Template: app/components/my-modal/template.hbs</p>
  
  <pre><code>&lt;div id="my-modal"&gt;
  
      &lt;div class="modal-dialog"&gt;
  
          &lt;div class="modal-content"&gt;
  
              &lt;div class="modal-body"&gt;
  
                  //jQuery will append template content here
  
              &lt;/div&gt;
  
          &lt;/div&gt;
  
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>