Code Quest

Ember Templates

18 Oct 2015

Ember Templates

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

Definiting Template

ember generate template welcome

<header>
  <h2>Welcome to EmberLand</h2>
</header>
<body>
{{outlet}}
</body>
<footer>
{{partial footer}}
</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

app/template/showUser.hbs

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

Displaying List of Items

<ul>
    {{#each model as |item|}}
<li>{{item}}</li>
    {{/each}}
</ul>

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

app/helpers

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);

template.hbs

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

Related Posts