Atelier emberjs - 2e épisode

app.js

// pour memoire
App = Ember.Application.create();

var marks = [
    {id: '1', title: 'barreverte', url: "http://barreverte.fr"},
    {id: '2', title: 'leanagilecamp', url: "http://leanagilecamp.fr"},
    {id: '3', title: 'ansamb', url: 'http://www.ansamb.com'}
];

App.Router.map(function () {
    this.resource('marks', {path: '/marks'});
    this.resource("mark.new", { path: "/mark/new" });
    this.resource("mark", { path: "/mark/:mark_id" });
    this.route('about');
});

App.ApplicationRoute = Ember.Route.extend({
  actions: {
    goToNewMark: function () {
      this.transitionTo( 'mark.new' );
    }
  }
});

App.MarkNewRoute = Ember.Route.extend({
  model: function() {
    return Ember.Object.create({ title: 'pouet', url: "http://pouet.fr"});
  },
  afterModel: function (mark, transition) {
      this.transitionTo('mark', mark);
  }
});

App.IndexRoute = Ember.Route.extend({
    beforeModel: function ( transition ) {
        this.transitionTo('marks');
    }
});

App.AboutRoute = Ember.Route.extend({
    model: function () { return {author: "Bruno"}}
});

App.MarksRoute = Ember.Route.extend({
    model: function () {
        return marks;
    }
});

App.MarkRoute = Ember.Route.extend({
    model: function (params) {
        return marks.findBy('id', params.mark_id);
    },
    actions: {  
        doneEditing: function () {
            this.transitionTo("marks");
        }
    }
});

plan.md

ajout de bootstrap

• fichiers CSS et JS bootstrap
• Cf snipet_navbar.html
• plus route 'about'

introduction des resources

route

correspondance entre une chaine (identifiant de la route), url, controller, route (objet) et template.

url 	   route 	 	contrôleur  		 	route 	  		template
/about 	 about 	 	AboutController 	AboutRoute 	 	about

resource

Pas la même sémantique : une route est pour les adjectifs ou les verbes, une resource correspond plus à un nom (une "classe"/"prototype" ou resource au sens REST).

La resource suivante :

App.Router.map(function() {
  this.resource('marks', function() {
    this.route('new');
  });
});

va créer les routes index (url /), marks (pas d'url correspondante), marks.index (url /marks) et marks.new (url /marks/new). contrairement à une route classique, en allant sur l'url /marks nous affichons le template /marks et /marks/index dans {{ outlet }} du template marks : les templates sont aussi imbriqués via l'outlet.

De la même manière la route marks.new rend le template /marks/new dans l'outlet du template /marks

On peut imbriquer des resources mais pas des routes.

les chemins (segments) dynamiques

Pour passer notre identifiant de route, nous pouvons définir une resource 'mark' dont le chemin est '/mark/:mark_id'

cf http://emberjs.com/guides/routing/defining-your-routes/

snipet_navbar.html

<div class="navbar navbar-default">
  <a class="navbar-brand" href="#">Mes Bookmarks</a>
  <ul class="nav navbar-nav">
    <li>{{#link-to 'marks'}}Marks{{/link-to}}</li>
    <li>{{#link-to 'about'}}à propos{{/link-to}}</li>
  </ul>
</div>