Ember App Kit

Na Ember.js een jaar geleden uitgeprobeerd te hebben tijdens een hackathon op school ben ik me er opnieuw in gaan verdiepen. Dit keer ben ik gaan werken met de Ember App Kit. Als oefen project ben ik mijn Films op TV pagina om gaan zetten naar Ember. De belangrijkste bevindingen zal ik behandelen.

De applicatie heeft van twee locaties gegevens nodig, FilmTotaal en Rotten Tomatoes. De gegevens van FilmTotaal worden gecached op mijn eigen site en de API van Rotten Tomatoes (RT) wordt direct aangesproken. In de model van Movie is een belongsTo koppeling gemaakt met de Tomato model. De Tomato model kan dan later door een eigen adapter de RT API aanspreken.

/filmsoptv/blob/master/app/models/movie.js
1
2
3
4
5
6
7
8
9
var Movie = DS.Model.extend({
    titel: DS.attr('string'),
    // regels verwijderd
    synopsis: DS.attr('string'),
    // koppeling met tomato model, die via de Rotten Tomatoes API de beoordelingen ophaald
    tomato: DS.belongsTo('tomato', {async: true})});
 
export default Movie;

De attributen hoeven niet in de DS.Model gedefinieerd te worden, het type wordt dan automatisch herkend. Zijn het echter array’s dan zullen ze wel gedefinieerd moeten worden.

/filmsoptv/blob/master/app/models/tomato.js
1
2
3
4
5
6
7
var Tomato = DS.Model.extend({
    ratings: DS.attr(),
    links: DS.attr(),
    // regels verwijderd
});
 
export default Tomato;

Ember gebruikt standaard het id attribuut als primary key. Voor de koppeling met FilmTotaal is echter het imdb id nodig. Deze is bij RT beschikbaar in de alternate_ids array. Op de volgende wijze kan het imdb id als primary key gedefinieerd worden.

export default DS.JSONSerializer.extend({
    primaryKey: 'alternate_ids.imdb'
});

Op de index moeten twee lijsten ingeladen worden. Met Ember.RSVP.hash kunnen de twee lijsten opgehaald worden.

/filmsoptv/blob/master/app/routes/index.js
1
2
3
4
5
6
7
8
9
10
11
var indexRoute = Ember.Route.extend({
  model: function() {
//  return this.store.find('list', 1); // old
    return Ember.RSVP.hash({
        moviesToday: this.store.find('list', 1),
        moviesTomorrow: this.store.find('list', 2)
    });
  }
});
 
export default indexRoute;

De lijst is vervolgens op volgende manier uit te lezen.

{{#each movie in moviesToday.movies}}
   {{{movie.titel}}}
{{/each}}

Als laatst moet ook de Bootstrap accordion geïmplementeerd worden. Na wat zoek werk ben ik uit de gekomen op de implementatie uit deze Gist op Github.