EMBERJS : 해시의 기능 프로토 타입

Question

4 개의 수직 패널 UI가 있습니다.

• 첫 번째 패널에는 메뉴가 표시되며 표시하려는 데이터를 선택할 수 있습니다.
• 두 번째 패널을 사용하면 사전 정의 된 필터 목록에서 필터를 선택할 수 있습니다.
• 세 번째 패널에서는 필터의 결과 목록을 볼 수 있습니다.
• Forth 패널을 통해 특정 항목의 세부 사항을 표시 할 수 있습니다.

이 UI의 경우 중첩 경로와 매장을 사용합니다.

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

모든 것이 잘 작동하지만 특정 항목의 세부 사항 (내 중첩 노선의 마지막 경로)을 표시하면 URL의 해시가 올바르게 아닙니다.

• 첫 번째 경로 확인 : #/고객
• 두 번째 경로 OK : #/고객/모두
• 세 번째 Route KO : #/Customer/Function Filter () {[Native Code]}/show/2

JSBIN에 예를 들어 다음과 같습니다. http://jsbin.com/inagavo/1

내가 뭘 잘못하고 있죠 ? 고맙습니다

Answer 1

문제는 Ember가 각 경로의 모델을 기반으로 URL을 구축한다는 것입니다. 활성/모든 경로 아래의 경로를 구축하려고 할 때는 항목 배열 (필터라고 불리는 필드가 없음)을 사용하여 현재 All/Filter가 있는지 확인하는 방법을 모릅니다. 모델. 모범 사례는 슬러그 (The : value in the Path)가 모델의 속성과 일치하도록하는 것입니다.

일치하지 않으면 경로에서 직렬화 메소드를 무시할 수 있으므로 Ember는 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