2017-11-04 12 views
0

일치하는 모든 데이터를 표시하는 테이블 구성 요소를 작성하려고합니다. 나는이 일을하는 법을 모른다.Ember.js - 모델 데이터 매칭 및 컨트롤러에서 많은 관계가 있음

저는 여러 마켓을 가진 플랫폼이 여러 개 있습니다.

모델은 간단합니다 : 사용자가 플랫폼을 비교하는 것을 선택하고 컨트롤러의 id의 액세스 할 수 있도록

model() { 
    return this.store.findAll('platform', {include: 'markets'}); 
} 

내가 확인란을 표시 할 수 있습니다.

컨트롤러의 모델에서 올바른 레코드를 가져 오는 방법은 무엇입니까? 어떤 플랫폼을 선택 하느냐에 따라 경로에서이 작업을 수행 할 수 없습니다.

this.get('store').findRecord('platform', id, {include: 'markets'}) 

을하지만 시장에 액세스하는 방법을 알아낼 수 없습니다 :

나는 엠버 데이터를 사용할 수 있습니다.

는 또한 enumerables을 시도했지만 같은 문제 :이 후

this.get('model').filterBy('id', id) 

는 자신의 이름을 기준으로 일치하는 시장을 얻을 수있는 깨끗한 방법은 무엇입니까?

답변

1

상황에 따라 구성 요소 내의 선택한 플랫폼을 기반으로 시장에 액세스하여 비교할 수 있습니다. 각 플랫폼은 모델 파일 내의 관련 시장에 설정된 관계를 가져야합니다. 이 관계를 통해 플랫폼에서 시장에 접근 할 수 있습니다. 예를 들어, 컨트롤러, 구성 요소 또는 {{platform.markets}} 내에있는 platform.get('markets')은 템플릿 내에 있습니다. https://ember-twiddle.com/364d9c04d37593f4a7c40cccf065a8fc?openFiles=routes.application.js%2C

:

//Within the platform.js model just to set the basic relationship 
markets: hasMany(), 

//Within your controller.js build an array of selected platforms 
selectedPlatforms: null, 

actions: { 
    selectPlatform(platform) { 
    this.get('selectedPlatforms').pushObject(platform); 
    }, 
} 

//Within your template.hbs provide your component the array 
{{matching-markets platforms=selectedPlatforms}} 

//Within your component.js compare the platform markets 
platforms: null, 

matchingMarkets: computed('platforms', function() { 
    const platform1Markets = this.get('platforms.firstObject.markets'); 
    const platform2Markets = this.get('platforms.lastObject.markets'); 
    return /* Compare platform1Markets against platform2Markets */; 
}), 

// Within the component.hbs 
{{#each matchingMarkets as |market|}} 
    {{market.name}} 
{{/each}} 

약간 더 나은 통찰력을 제공 할 수 있습니다 거친 (약간 해키) 예를보기 위해 EmberTwiddle에 아래의 링크를 참조하시기 바랍니다 : 응용 프로그램 파일을 통해 구현하는 거친 과정에 대한 좀 더 세부 사항에 대한