Tento článek je překladem textu Ember.JS – What it is and why we need to care about it, jehož autorem je Sourav Lahoti, a je zveřejněn pod licencí CC BY-SA 3.0.

Vývojáři se stále víc kloní k používání frameworků pro zjednodušení vývoje na klientské straně a chtějí ty opravdu dobré. Na tomto poli najdeme řadu hráčů, ale jen málo jich skutečně vyniká — a mezi takové patří Ember.js.

Co to je, ten Ember.js?

Ember.js je javascriptový MVC (Model–View–Controller) framework, udržovaný Ember Core týmem (v něm je Tom Dale, Yehuda Katz a další). Pomáhá vývojářům ve tvorbě ambiciózních jednostránkových webových aplikací (SPA) s důrazem na prvky, ve kterých celý web vyniká: sémantické URI, „REST“ architektura a napiš-jednou-spusť-kdekoliv trio HTML, CSS a JavaScript.

Proč se zajímat o Ember.JS?

Ember.js je pevně svázán s technologiemi, které dělají dnešní web webem. Nesnaží se od nich abstrahovat. Ember.js přináší čistý a konzistentní aplikační vývojový model. Pokud někdy bude potřeba migrovat z HTML na jinou technologii, Ember.js framework se bude vyvíjet podle aktuálních trendů na poli webových technologií.

Snadno v něm vytvoříte své vlastní “komponenty” a “šablony”, které jsou snadno srozumitelné a udržovatelné. Spolu s konzistentním způsobem pro správu vazeb (bindings) a computed vlastností nabízí Ember.js hromadu kódu, které takový framework potřebuje.

Základní koncept

Nejprve několik termínů, se kterými se při vývoji s Ember.js často setkáte, protože tvoří jeho základní stavební kameny:

Routy

Objekt Route reprezentuje stav aplikace a korespondující url.

Modely

Ke každé routě je asociovaný objekt Model, který obsahuje data asociovaná s aktuálním stavem aplikace.

Controllery

Controllery se používají pro propojení modelů a zobrazovací logiky.

Objekt Controller obvykle dědí od ObjectController, v případě, že je šablona asociovaná s jedním záznamem modelu, anebo od ArrayController, v případě, že je šablona asociovaná s polem záznamů.

Pohledy (Views)

Pohledy šablonám přidávají sofistikovanou obsluhu uživatelských událostí anebo nějaké znovupoužitelné chování.

Komponenty

Komponenty jsou specializované pohledy sloužící k tvorbě vlastních elementů, které pak můžete snadno používat v šablonách.

Tak a začínáme

Data binding:

<script type=”text/x-handlebars”>
  <p>
    <label>Insert your name:</label>
    {{input type=”text” value=name}}
  </p>

  <p><strong>Echo: {{name}}</strong></p>
</script>

App = Ember.Application.create();

Ember.js podporuje data binding, jak můžete vidět v ukázce výše. Jméno, které napíšeme do pole input, je vázáno s položkou name, která se vypíše za nápis Echo: . Když text na jednom místě změníte, automaticky bude všude aktualizován.

Jenže, jak to ten Ember.js dělá? Ember.js používá šablony Handlebars pro obousměrný data binding. Šablony získávají data ze svého controlleru. Pokaždé, když něco napíšete do inputu, bude aktualizovaná vlastnost name našeho controlleru. Následně bude aktualizována šablona, protože se změnila její provázaná data.

Jednoduché demo – vizitka

Vytvoříme si v Handlebars vlastní elementy.

HTML

<script type="text/x-handlebars">

  {{v-card myname=name street-address=address locality=city zip=zipCode email=email}}

  <h2 class="subheader">Enter Your information:</h2>

  <label>Enter Your Name:</label>
  {{input type="text" value=name}}

  <label>Enter Your Address:</label>
  {{input type="text" value=address}}

  <label>Enter Your City:</label>
  {{input type="text" value=city}}

  <label>Enter Your Zip Code:</label>
  {{input type="text" value=zipCode}}

  <label>Enter Your Email address:</label>
  {{input type="text" value=email}}

</script>

<script type="text/x-handlebars" data-template-name="components/v-card">

  <ul class="vcard">
    <li class="myname">{{myname}}</li>
    <li class="street-address">{{street-address}}</li>
    <li class="locality">{{locality}}</li>
    <li><span class="state">{{usState}}</span>, <span class="zip">{{zip}}</span></li>
    <li class="email">{{email}}</li>
  </ul>

</script>

CSS

.vcard {
  border: 1px solid #dcdcdc;
  max-width: 12em;
  padding: 0.5em;
}

.vcard li {
  list-style: none;
}

.vcard .name {
  font-weight: bold;
}

.vcard .email {
  font-family: monospace;
}

label {
  display: block;
  margin-top: 0.5em;
}

JavaScript

App = Ember.Application.create();

App.ApplicationController = Ember.Controller.extend({
    name: 'Sourav',
    address: '123 M.G Road.',
    city: 'Kolkata',
    zipCode: '712248',
    email: 'me@me.com'
});

Komponenta je definována otevírající značkou <script type="text/x-handlebars">, které nastavíme atribut data-template-name na components/[JMÉNO].

Měli bychom zmínit, že specifikace web component vyžaduje, aby jméno obsahovalo pomlčku a bylo tak snadno odlišitelné od existujících HTML značek.

A to je všechno. Ve skutečnosti je toho mnohem víc, další informace najdete v Ember.js Guides. (Pokud bude zájem, můžeme se frameworku Ember.JS tady na Zdrojáku věnovat více. – pozn. red.)