Wie kann ich verschachtelte Routen in ember.js disambiguieren?

Question

Ich habe zwei Ressourcen, die beide die gleiche Unterressource haben:

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

    this.resource('product', function() { 
    this.resource('comments', function() { 
     this.route('new'); 
    }); 
    }); 
}); 

Das Problem ist, dass die glut Router die Namen der Route Objekte aus nur den aktuellen und Eltern Routen, nicht aus dem Ganzen baut Hierarchie. Daher versucht es, sowohl /posts/:id/comments/new als auch /products/:id/comments/new an das Objekt App.NewCommentRoute zu routen. Was kann ich tun, um das zu beheben? Dieser Eintrag wurde von einem GitHub issue angepasst.

Answer 1

Ich nahm James A. Rosen Lösung einen Schritt weiter und es funktionierte wie ein Charme. Ein wenig überflüssig, sondern macht die Dinge viel intuitiver auf der Straße:

App.Router.map(function() { 
    this.resource('post', function() { 
    this.resource('post.comments', { path: '/comments' }, function() { 
     this.route('new'); 
    }); 
    }); 

    this.resource('product', function() { 
    this.resource('product.comments', { path: '/comments' }, function() { 
     this.route('new'); 
    }); 
    }); 
}); 

Dies ermöglicht es Ihnen jetzt transitionTo('product.comments.new') oder App.register('route:product.comments.new', myRouteHandler) wie ursprünglich erwartet zu verwenden.

Wenn Sie nicht manuell Sie Ihre Route-Handler registrieren, Ember, anmutig, werden sogar danach suchen in App.ProductCommentsNewRoute

Der einzige Nachteil ist die Redundanz der Definition den Namen der Unterressource mit dem gleichen Stammnamen dass die übergeordnete Ressource bereits verfügt.

Answer 2

Wenn Sie eine Route angeben, wird standardmäßig der Name der Route verwendet, Sie können dieses Verhalten jedoch überschreiben. Sie können tief verschachtelte Routen disambiguieren, indem Sie dem Namen weitere Informationen hinzufügen. Es gibt zwei Möglichkeiten, im Wesentlichen das gleiche Ergebnis zu erzielen:

App.Router.map(function() { 
    this.resource('post', function() { 
    this.resource('postComments', { path: '/comments' }, function() { 
     this.route('new'); 
    }); 
    }); 

    this.resource('product', function() { 
    this.resource('productComments', { path: '/comments' }, function() { 
     this.route('new'); 
    }); 
    }); 
}); 

App.Router.map(function() { 
    this.resource('post', function() { 
    this.resource('comments', function() { 
     this.route('newPost', { path: '/new' }); 
    }); 
    }); 

    this.resource('product', function() { 
    this.resource('comments', function() { 
     this.route('newPost', { path: '/new' }); 
    }); 
    }); 
}); 

In beiden Fällen wird der Router jetzt suchen App.NewPostCommentsPath und App.NewProductCommentsPath. Der Vorteil der ersten gegenüber der zweiten ist, dass, wenn Sie die Routen extern beziehen möchten, sie wie "postComments.new" statt "comments.newPost" aussehen. Ersteres liest sich besser für mich.

Answer 3

Als zwei Jahre vergangen sind, hat sich Ember sehr verbessert.

Seit Ember 1.7 können Routen auch Unterrouten haben: http://emberjs.com/blog/2014/08/23/ember-1-7-0-released.html#toc_new-features.

So können wir umschreiben dies als:

this.route('post', function() { 
    this.route('comments', { path: '/comments' }, function() { 
     this.route('new'); 
    }); 
}); 

this.route('product', function() { 
    this.route('comments', { path: '/comments' }, function() { 
     this.route('new'); 
    }); 
});