#2 Un'applicazione è composta da diverse classi

Tutte le classi definite nel nostro sorgente sono degli override di classi che Ember genera automaticamente a runtime.

È necessario definire una classe solo se vogliamo estendere il comportamento di default previsto da Ember.

#2 Esempio

 App.ContrattoRoute = Ember.Route.extend();

 App.ContrattoRoute = Ember.Route.extend({
    setupController: function(controller, model) {
        controller.set('oggi', new Date());
    }
 });

#3 Controller != controller

Ember.js è un framework MVC ma la terminologia non è sempre comparabile a quella di framework server side.

I Controller in Ember sono dumb, la loro unica funzione è fornire dati ai template.

Dove mettere la logica dell'applicazione?

ROUTES

Business logic

Controller

Presentation logic

#5 L'object model

Ogni classe eredita da Ember.Object

Usare sempre i getter e i setter per evitare problemi con gli observables e le computed properties.

Una classe può estendere diversi mixin (simili ai traits in PHP).

#5 L'object model in pratica

Definizione di classe con extend

var Cibo = Ember.Object.extend({
  calorie: null,
  soddisfazione: null
});

var pizza = Cibo.create({
  soddifazione: 7
});

pizza.set('calorie', 266);

Cibo.reopenClass({
  oraDiPranzo: function() {
    var ore = (new Date()).getHours();
    return ore > 11 && ore < 15;
  }
});

Cibo.oraDiPranzo(); // purtroppo false

I building blocks

I building blocks

Route Ha accesso all'url, carica i models (con chiamate al server) e contiene la logica dell'applicazione

Controller Riceve i dati dalla Route e li fornisce alla View

View Renderizza il template e interagisce direttamente con il DOM (es. per usare plugin jQuery)

Template Ember.js usa handlebars come linguaggio di templating

UNA mini app in 20 righe

DEMO http://emberjs.jsbin.com/likenosa/7

App = Ember.Application.create();

App.Router.map(function() {
  this.route('subreddit',  { path: '/r/:subreddit' });
});

App.IndexRoute = Ember.Route.extend({
  model: function() {
    return Ember.$.getJSON('http://www.reddit.com/reddits.json?jsonp=?');
  }
});

App.SubredditRoute = Ember.Route.extend({
  model: function(params) {
    var url = 'http://www.reddit.com/r/' + params.subreddit + '.json?jsonp=?';
    return Ember.$.getJSON(url);
  }
});

Lista subreddits

http://www.reddit.com/reddits.json

{
  "data": {
    "children": [
      { "data": { "display_name": "pics" } },
      { "data": { "display_name": "funny" } },
      { "data": { "display_name": "aww" } }
    ]
  }
}

subreddit.hbs

<ul>
  {{#each item in model.data.children}}
    <li>
      <a href="/#/r/{{unbound item.data.display_name}}">
        {{item.data.display_name}}
      </a>
    </li>
  {{/each}}
</ul>

Lista POST

http://www.reddit.com/r/aww.json

{
  "data": {
    "children": [
      {
        "data": { "thumbnail": "http://...", "permalink": "http://...", "title": "Ember FTW" }
      },
      { ... },
      ...
    ]
  }
}

<ul>
  {{#each item in model.data.children}}
    <li>
      <img src="{{unbound item.data.thumbnail}}">
      <a href="{{unbound item.data.url}}">
        {{item.data.title}}
      </a>
    </li>
  {{/each}}
</ul>