Ember Templates

Ember Templates

  • Decoupling the UI from the Backend data
  • Handlebars Template Library
    • http://handlebarsjs.com/

Definiting Template

ember generate template welcome

  <h2>Welcome to EmberLand</h2>
{{partial footer}}

outlet helper tells the router to render the next appropriate template in place of outlet

Handlebar Conditionals

  • Promote business logic inside template
  • Promotes Separation of Concern (SoC)

If, else, and unless


{{#if showUsers}}
{{#each users as |user|}}
  <li>Name - {{user.name}}</li>
  <li>Email - {{user.email}}</li>
  <li>Twitter - {{user.twitter}}<li>
<h3>Input User Details</h3>

Displaying List of Items

    {{#each model as |item|}}

Binding HTML Tag Attributes

{{bind-attr class="className"}}

Building Custom Handlebar Helpers

Handlebar helpers provides reusable template to do most common tasks.

Helpers in the Ember CLI go inside


import Ember from 'ember';

export function currentDateTime(value, options) {

  var dateString = "";

  if (options.hash.format != undefined) {
    dateString = moment().format(options.hash.format);
  } else {
    dateString = moment().format("MMM Do YY");

  console.log("Current DateTime : " + dateString);
  return dateString;

export default Ember.Helper.helper(currentDateTime);


{{current-date-time format='MMMM Do YYYY, h:mm:ss a'}}