두 개의 연결된 선택 필드를 만드는 것은 매우 못생긴 것입니다. 내가 뭘 잘못하고있는 걸까요?

Question

서버 측 (ATM은 여전히 ​​FixturesAdapter를 사용하고 있습니다)에서 데이터를 가져와 사용자가 끌어온 형식 중 하나를 선택하여 선택하도록 두 개의 연결된 선택 입력을 만들고 싶습니다. 모든 형식에는 속한 범주가 있으므로 첫 번째 입력을 통해 사용자가 범주를 선택한 다음 두 번째 선택 입력이 업데이트되어 선택한 범주의 형식 만 포함됩니다.

나는 그럭저럭 효과를 낼 수 있었지만, 코드는 정말 지저분 해 보였으며, 그것을 개선 할 방법이 있습니까?

도움을 주시면 감사하겠습니다. 감사합니다.

형식 모델

App.Format = DS.Model.extend({ 
    title: DS.attr('string'), 
    category: DS.attr('string') 
}); 

ApplicationRoute

App.ApplicationRoute = Ember.Route.extend({ 
    setupController: function(controller, model) { 
     this.controllerFor('formats').set('model', this.store.find('format')); 
    } 
}); 

formats.hbs

<label class="control-label">Category:</label> 
<div class="controls"> 
    {{view "select" content=categories value=selectedCategory}} 
</div> 
<label class="control-label">Format:</label> 
<div class="controls"> 
    {{view "select" content=formats value=selectedFormat}} 
</div> 

FormatsController

App.FormatsController = Ember.ArrayController.extend({ 

    needs: 'index', 

    categories: function() { 
     return this.mapBy('category').uniq(); 
    }.property('@each.title'), 

    observeCategories: function() { 
     this.set('selectedCategory', this.get('categories.firstObject')); 
    }.observes('categories'), 

    observeSelectedCategory: function() { 
     this.set('formats', this.filterBy('category', this.get('selectedCategory')).mapBy('title')); 
    }.observes('selectedCategory'), 

    observeFormats: function() { 
     this.set('selectedFormat', this.get('formats.firstObject')); 
    }.observes('formats'), 

    observeSelectedFormat: function() { 
     var format = this.findBy('title', this.get('selectedFormat')); 
     this.get('controllers.index').set('format', format); 
    }.observes('selectedFormat') 

}); 

Answer 1

TL; DR - Working JS Bin Example 당신이 잘못 여기서 뭐하는 몇 가지가 있습니다

:

1. 귀하의 ApplicationRoute.setupController 방법은 다른 컨트롤러에 대한 모델을 설정하는 데 사용됩니다가. setupController은 라우트 컨트롤러을 설정하기위한 것입니다. 또한 setupController을 무시하면 this._super(controller, model)에 전화하는 것이 더 낫습니다. 따라서 model은 controller의 모델로 설정됩니다.
2. App.FormatsRoute을 구현해야 model 메서드를 구현해야하며 여기에서 this.store.find('format')을 반환해야합니다. 이를 위해 App.FormatsRoute.setupController 메서드를 재정의 할 필요가 없습니다.

   {{view "select" content=formats optionLabelPath='content.title' optionValuePath='content.id' selection=selectedFormat}}

   formats가 format 모델 배열 같아야

3. formats
같아야 categories

4. {{view "select" content=formats value=selectedFormat}}

   에 따라 계산 된 속성이어야한다. 이런 방식으로 selectedFormat은 사용자가 직접 계산하지 않고도 형식 모델로 채워집니다.