EMBERJS: Prototype de fonction dans le hachage

Question

J'ai quatre panneaux verticaux UI:

• Le premier panneau affiche le menu et vous permet de choisir les données que vous souhaitez afficher
• Le deuxième panneau vous permet de sélectionner un filtre dans une liste de filtres prédéfinis
• Le troisième panneau vous permet de voir la liste des résultats du filtre
• Le panneau Forth vous permet d'afficher les détails d'un élément spécifique

Pour cette interface utilisateur, j'utilise des itinéraires et des points de vente imbriqués:

App.Router.map(function() {
    this.resource('customers', { 'path' : '/customers' }, function() {
        this.resource('customers_filters', { 'path' : '/:filter' }, function() {
            this.resource('customer', { 'path' : '/show/:customer_id' });
        });
    });
});

Tout fonctionne bien mais lorsque je montre les détails d'un élément spécifique (la dernière route dans mes routes imbriquées), le hachage dans l'URL n'est pas correct.

• Premier itinéraire OK: # / Clients
• Deuxième itinéraire OK: # / clients / tous
• Troisième route ko: # / clients / fonction Filter () {[code natif]} / show / 2

J'ai mis un exemple sur JSBIN: http://jsbin.com/inagavo/1

Qu'est-ce que je fais mal ? Merci

Answer 1

Le problème est qu'Ember construit l'URL en fonction des modèles pour chaque itinéraire. Lorsqu'il essaie de construire l'itinéraire sous l'itinéraire actif / tout, il utilise votre tableau d'articles (qui n'a pas de champ appelé filtre) afin qu'il ne sache pas comment déterminer s'il a actuellement le tout / filtre maquette. Une bonne pratique consiste à faire correspondre votre limace (la valeur dans le chemin) sur la propriété sur le modèle.

S'il ne correspond pas, vous pouvez remplacer la méthode de sérialisation dans l'itinéraire, alors Ember sait comment sérialiser votre modèle pour l'URL.

App.CustomersFiltersRoute = Ember.Route.extend({
  model: function(params) {

    if(params.filter == "active") {
      return _.where(App.Customers, {isActive: true});
    }

    return App.Customers;
  },

  serialize: function(model){
    if(model === App.Customers){
      return {filter:'all'}; 
    }
    return {filter:'active'};
  }
});

http://jsbin.com/inagavo/6/edit