Sharing templates between components

README_01.md

Example of using the same template between two components.

View Twiddle | Copy Twiddle | View Gist

Original idea of this README taken from @rwjblue

application.controller.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName:'Sharing templates between components'
});

application.template.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
<p>There are 2 components, the first one with a template and the second one without it. Rendering the second-component we obtain this:</p>
{{second-component}}
<br>
<br>

first-component.component.js

import Ember from 'ember';

export default Ember.Component.extend({
});

first-component.template.hbs

<h4>this is component first</h4>

second-component.component.js

import Ember from 'ember';
import layout from '../first-component/template';

export default Ember.Component.extend({
  layout: Ember.computed(function() {
    //One way is by importing the template and the
    //other way is by using templateForName
    return layout;
    //return this.templateForName('first-component')
  })
});

twiddle.json

{
  "version": "0.4.11",
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.13.10/ember.debug.js",
    "ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/1.13.13/ember-data.js",
    "ember-template-compiler": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.13.10/ember-template-compiler.js"
  }
}