Ember.js - 라우터에서 만든 컨트롤러 인스턴스에보기를 바인딩하는 방법

Question

Ember.js의 최신 빌드를 사용하고 있습니다. flot.js를 사용하여 막 대형 차트를 표시하는 Ember 앱이 있습니다. 뷰는 싱글 톤 객체 컨트롤러에 바인딩되어 동적으로 차트를 업데이트합니다. 여기에 간단한 jsbin 데모가 있습니다 : http://jsbin.com/edosaf/2/edit. 이 데모는 확장하는 대신 cardController 객체를 만듭니다. 관련 코드는 다음과 같습니다.

App.cardController = Ember.ObjectController.create({ 
    id: 1, 
    name: 'Visa', 
    chartData: [ [2011, 450], [2012, 550], [2013, 320] ] 
}); 

App.ApplicationView = Ember.View.extend({ 
    templateName: 'application', 
    chartValuesBinding: 'App.cardController.chartData' 
}); 

위의 코드를 변경하여 뷰에 바인딩하는 동안 cardController를 확장하지 않으면 안됩니다.

url에 전달 된 card_id를 기반으로 다른 막대 차트 데이터를 사용하여이 데모를 확장하고 싶습니다. 라우팅은 #/card/: card_id와 같습니다. 내 ChartView를 내 Card ObjectController의 다른 인스턴스에 바인딩하는 방법과 혼동합니다. 내 생각은 카드 ArrayController 모든 신용 카드 개체를 관리 할 수 ​​있습니다. 그런 다음 ArrayController와 ChartView에 바인딩 될 활성 카드를 관리하기위한 Card ObjectController를 가져야합니다.

바인딩 : 카드 ArrayController => 카드 ObjectController => 차트보기

내가 원하는 라우팅과 카드 ArrayController (응용 프로그램이 작동하지 않습니다)를 구현하려고 다른 jsbin 생성 : http://jsbin.com/edosaf/4/edit

어떻게을 엠버 라우터가 만든 컨트롤러 인스턴스에 뷰를 바인딩합니까? 이 예제에서 라우팅 #/card/: card_id를 사용하여 CardController 객체를 ChartView에 바인딩하도록 ember 응용 프로그램을 설계하는 것이 어떻습니까?

Answer 1

엠버 라우터가 만든 컨트롤러 인스턴스에 뷰를 바인딩하려면 어떻게해야합니까?

일반적으로 각보기에는 일치하는 컨트롤러 싱글 톤이 있습니다. 예를 들어, ApplicationView 안에 controller 속성을 통해 ApplicationController이라는 싱글 톤에 액세스 할 수 있습니다.

보기에서 다른 항목에 액세스해야 할 때마다 컨트롤러를 통해 수행해야합니다. 그런 다음 needs 배열을 사용하여 컨트롤러를 연결하십시오.

ApplicationController = Ember.Controller.extend({ 
    needs: ['card'] 
}); 

ApplicationView = Ember.View.extend({ 
    chartValuesBinding: 'controllers.card.chartData'  
});