component interpolation within handlebars template

components.hello-component.js

import Ember from 'ember';

export default Ember.Component.extend({
  classNames: ['ember-component']
});

components.my-component.js

import Ember from 'ember';

export default Ember.Component.extend({
  classNames: ['ember-component']
});

controllers.application.js

import Ember from 'ember';
const { computed, get } = Ember;

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  
  display: ['<table border="1" cellpadding="0" cellspacing="0" width="100%"><tbody>↵<tr>↵<td width="50%"><b>QUESTIONS</b></td>↵<td width="50%"><b>RESPONSES</b></td>↵</tr>↵↵<tr>↵<td width="50%">Blue is your favorite color?</td>↵<td width="50%">', 
            {componentName: "my-component"},
            '</td>↵</tr>↵↵<tr><td width="50%">Clowns are evil?</td><td width="50%">',
            {componentName: "hello-component"},
            '</td>↵</tr>↵↵</tbody></table>↵↵<p>&#160;'
           ],
  
  
  compiledHTML: Ember.computed('display', function(){
    let display = get(this, 'display');
    let domString = '';
    display.forEach(function(el) {
      if (typeof el === 'string') {
        domString += el;
      } else {
        domString += '<span class="replace-with-component"></span>';
      }
    });
    return domString;
  }),
  
  componentsToRender: Ember.computed('display', function() {
  	let display = Ember.get(this, 'display');
    let componentsToRender = [];
    display.forEach(function(item) {
    	if (item.componentName) {
        componentsToRender.push(item);
      }
    });
		return componentsToRender;    
  }),
    
    worksheetHasTableLayout: computed('compiledHTML', function() {
    let html = get(this, 'compiledHTML');
    return html.indexOf('<table') !== -1;
  }),
  
  // can we programatically render all components in componentsToRender array into DOM elements with a class of 'js-componentInsertion' ?
  init() {
  	this._super(...arguments);
    this.scheduleMoveComponents();
  },
  
  didInsertElement: function() {
  	this.scheduleMoveComponents();
  },
  
  
  scheduleMoveComponents:(function(){
  	var self = this;
    
    Ember.run.schedule('afterRender', function() {
    	self._moveComponents();
    });
    
  }).observes('display'),
  
  _moveComponents: function() {
    if (!Ember.get(this, 'worksheetHasTableLayout')) {
      return;
    }
    
    let componentSlots = Ember.$('.replace-with-component');
    let components = Ember.$('.ember-component');

    componentSlots.each(function(item) {
      Ember.$(this).replaceWith(components[item]);
    });
  }
});

helpers.injector.js

import Ember from 'ember';

export function injector(params/*, hash*/) {
  console.log(params);
  return params;
}

export default Ember.Helper.helper(injector);

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

.ember-component {
  background: lightblue;
  border: 1px solid;
  border-radius: 2px;
  margin: 2px;
}

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>

{{ injector "banjo" }}

{{! TODO: move this 'Current Behavior' section to a separate page so as to not confuse }}

<h2> Current Behavior </h2>
{{#each display as |section|}}
	{{#if section.componentName}}
  	{{! render my component}}
    {{ section.componentName }}
  	{{!component section.componentName componentModel=section.model}}
  {{else}}
  	{{{ section }}}
  {{/if}}
{{/each}}

<hr />

<h2> With HTML compiled first, and components moved to correct locations later in Ember Run loop</h2>


{{#if worksheetHasTableLayout }}
  {{log 'table layout detected'}}
  {{{ compiledHTML }}}
  {{#each componentsToRender as |comp|}}
    {{ log 'rendering the following component: ' comp.componentName }}
    {{ component comp.componentName componentModel=comp.model mediaList=mediaList currentTooltip=currentTooltip parent=this}}
  {{/each}}
{{/if}}

templates.components.hello-component.hbs

<h2>hello-component</h2>
<p>Why Hello there.</p>

templates.components.my-component.hbs

<h2>my-component</h2>
<p>This is the text belonging to my-component</p>

twiddle.json

{
  "version": "0.10.4",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.7.0",
    "ember-data": "2.7.0",
    "ember-template-compiler": "2.7.0"
  },
  "addons": {}
}