Templates

Ember utilise handlebars pour la partie templates.

Hamdlebars utilise comme beaucoup d'autres moteurs de templates les doubles accolades {{}} pour faire appel aux expressions.

Hello, <strong>{{firstName}} {{lastName}}</strong>!

Cette utilisation suppose que les propriétés firstName et lastName aient été définies dans le contrôleur associé :

import Controller from '@ember/controller';

export default Controller.extend({
  firstName: 'Trek',
  lastName: 'Glowacki'
});

Les blocks expressions commencent par {# et se terminent par /}

<ul>
  {{#each people as |person|}}
    <li>Hello, {{person.name}}!</li>
  {{/each}}
</ul>

<ul>
  {{#each people as |person index|}}
    <li>Hello, {{person.name}}! You're number {{index}} in line</li>
  {{/each}}
</ul>

{{#each people as |person|}}
  Hello, {{person.name}}!
{{else}}
  Sorry, nobody is here.
{{/each}}

<div>
  {{if isFast "zoooom" "putt-putt-putt"}}
</div>

{{#if person}}
  Welcome back, <b>{{person.firstName}} {{person.lastName}}</b>!
{{/if}}

{{#if person}}
  Welcome back, <b>{{person.firstName}} {{person.lastName}}</b>!
{{else}}
  Please log in.
{{/if}}

{{#if isAtWork}}
  Ship that code!
{{else if isReading}}
  You can finish War and Peace eventually...
{{/if}}

unless est la négation du if (if not)

{{#unless hasPaid}}
  You owe: ${{total}}
{{/unless}}

link-to permet de générer des liens href et prend 1 ou 2 arguments :

• le premier est le nom d'une route
• le second (facultatif) correspond à l'id d'un model pour les segments dynamiques

Avec la route déclarée dans router.js suivante :

Router.map(function() {
  this.route('photos', function(){
    this.route('edit', { path: '/:photo_id' });
  });
});

et le fichier de template :

<ul>
  {{#each photos as |photo|}}
    <li>{{#link-to "photos.edit" photo}}{{photo.title}}{{/link-to}}</li>
  {{/each}}
</ul>

Ember génère le html :

<ul>
  <li><a href="/photos/edit/1">Happy Kittens</a></li>
  <li><a href="/photos/edit/2">Puppy Running</a></li>
  <li><a href="/photos/edit/3">Mountain Landscape</a></li>
</ul>

A link in {{#link-to "index"}}Block Expression Form{{/link-to}},
and a link in {{link-to "Inline Form" "index"}}.

Génère le code html suivant :

A link in <a href="/">Block Expression Form</a>,
and a link in <a href="/">Inline Form</a>.