Tôi làm cách nào để phân biệt các tuyến đường lồng nhau trong ember.js?

Question

Tôi có hai nguồn lực mà cả hai đều có cùng một tiểu tài nguyên:

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'); 
    }); 
    }); 
}); 

Vấn đề là các bộ định tuyến ember xây dựng những cái tên của các đối tượng đường ra khỏi chỉ các tuyến đường hiện tại và cha mẹ, không ra khỏi toàn bộ hệ thống cấp bậc. Do đó, nó cố định tuyến cả /posts/:id/comments/new và /products/:id/comments/new đến đối tượng App.NewCommentRoute. Tôi có thể làm gì để sữa nó?

Bài đăng này đã được điều chỉnh từ GitHub issue.

Answer 1

Tôi lấy giải pháp của James A. Rosen thêm một bước nữa và nó hoạt động như một sự quyến rũ. Một chút dư thừa, nhưng làm cho mọi thứ trực quan hơn nhiều xuống đường:

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'); 
    }); 
    }); 
}); 

này bây giờ cho phép bạn sử dụng transitionTo('product.comments.new') hoặc App.register('route:product.comments.new', myRouteHandler) cũng giống như dự kiến ​​ban đầu.

Nếu bạn không tự đăng ký xử lý tuyến đường của bạn, Ember, duyên dáng, sẽ thậm chí tìm kiếm nó trong App.ProductCommentsNewRoute

Nhược điểm duy nhất là khả năng dự phòng xác định tên của sub-tài nguyên với tên cùng một gốc tài nguyên chính đã có.

Answer 2

Khi bạn chỉ định tuyến đường, đường dẫn mặc định là tên của tuyến đường, nhưng bạn có thể ghi đè hành vi đó. Bạn có thể định hướng các tuyến đường lồng nhau bằng cách thêm nhiều thông tin hơn vào tên. Có hai cách để đạt được cơ bản các kết quả tương tự:

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' }); 
    }); 
    }); 
}); 

Trong cả hai trường hợp, nay là router sẽ tìm kiếm App.NewPostCommentsPath và App.NewProductCommentsPath. Lợi thế của lần đầu tiên trong phần thứ hai là nếu bạn muốn tham chiếu đến các tuyến đường bên ngoài, chúng trông giống như "postComments.new" thay vì "comments.newPost". Cựu người đọc tốt hơn cho tôi.

Answer 3

Đã hai năm trôi qua, Ember đã cải thiện rất nhiều.

Vì Ember 1.7, các tuyến đường cũng có thể có các chương trình con: http://emberjs.com/blog/2014/08/23/ember-1-7-0-released.html#toc_new-features.

Vì vậy, chúng ta có thể viết lại này như:

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'); 
    }); 
});