Ember에있는 두 세트의 JSON 데이터 연결하기

Question

두 세트의 데이터를 개별적으로로드하고 있는데 관련성이 있기를 바랍니다. 설명 할 수있게 해줘.

첫 번째로 나는 Ember-data를 사용하지 않고 대신 this post from one of the Discourse team에 설명 된 간단한 $.ajax 래퍼를 사용합니다.

나는 채널과 프로그램의 개념을 가지고있다.

채널 JSON :

[{ 
    "ID":94, 
    "Name":"BBC1" 
}, 
{ 
    "ID":105, 
    "Name":"BBC2" 
}] 

나는이 JSON에서 ID를 수집해야 그 채널에 대한 프로그램을 다음을 요청할 수 있습니다. 따라서이 같은 비트 모양 엔드 포인트 프로그램의 응답 :

프로그램 JSON : 각 Listings 배열은 프로그램의 X 금액을 포함 할 수 있습니다

{ 
    "Channels": [ 
     { 
      "Listings": [ 
       { 
        "Id": "wcy2g", 
        "Genres": "Education", 
        "S": "2013-04-26T10:45", 
        "E": "2013-04-26T11:15", 
        "T": "Crime Scene Rescue" 
       } 
      ] 
     }, 
     { 
      "Listings": [ 
       { 
        "Id": "wcwbs", 
        "Genres": "Current affairs,News", 
        "S": "2013-04-26T11:00", 
        "E": "2013-04-26T12:00", 
        "PID": "nyg", 
        "T": "Daily Politics" 
       } 
      ] 
     } 
    ] 
} 

을하고 Channels의 개체 배열은 Channels.json의 ID로 요청 된 순서와 관련이 있으므로 Channels[0]은 BBC1이고 Channels[1]은 BBC2입니다.

이 두 데이터 세트를 각각 하나의 JSON 요청으로 요청했지만 어떻게 든 관계를 맺고 싶습니다. 따라서 x 개의 프로그램 모델을 가진 채널 컨트롤러가 필요합니다.

을 반복 할 수 있고 해당 항목의 색인을 사용하여 programmes.json에있는 관련 항목을 찾아보고 그런 식으로 관계를 만들 수 있다고 생각 했었습니다.

그래도 Ember를 사용하는 방법을 잘 모르겠습니다.

감사합니다.

Answer 1

나는 이것과 매우 비슷한 것을 시도해 보았습니다. 나는 당신의 물건을 사용하여 내가 한 일을 스케치 할 것이다. 소금을 한알 섭취 할 필요가있을 정도로 나는 새끼를 낳기가 상당히 쉽다.

먼저 "채널", "채널"및 "프로그램"에 대한 모델 개체가 있어야합니다. 결국 결국 엠버의 명명 규칙과 잘 어울리는 컨트롤러와 라우터를 갖게됩니다. ChannelsData에는 많은 ChannelData 객체가 있고 각 ChannelData에는 많은 ProgrammeData 객체가 있습니다. 어떻게 이들을 채울 수 있습니까?

ChannelsRoute 클래스에는 해당 경로의 모델 데이터를 반환하는 model() 함수를 사용할 수 있습니다. 모델 함수는 ChannelsData에서 create()를 호출하여 인스턴스를 만든 다음 ChannelsData에서 loadAll 함수를 호출 할 수 있습니다. ChannelsData는 선호하는 Ajax 형식을 사용하여 loadAll()을 구현합니다. 간단히 말해서 가장 쉬운 방법은 해당 함수가 아약스 호출을 수행하고 전체 데이터 트리를 작성하는 것입니다.

예를 들어 #/channels/105와 같은 경로를 브라우저에 직접 입력하면 ChannelRoute 클래스가 model()을 호출하려고하면 문제가 발생할 수 있습니다. 이 문제를 해결하려면 App 객체에 App.ChannelsStore = {}와 같은 간단한 객체 저장소를 만들고 각 채널을 만들 때 ChannelsStore에 대한 참조 (ID 별)를 입력하십시오.그런 다음 ChannelRoute.model 함수는 해당 저장소에서 모델을 조회 할 수 있습니다. 그러나 ChannelsRoute.model이 처음 완료된 경우에만!

사용자가 #/channels/105 경로를 앱의 첫 번째 항목으로 입력하면 코드가 ChannelsRoute.model() 메소드를 통과하고 즉시 ChannelRoute.model() 메소드를 거치며, 아마 당신의 아약스가 끝나기 전에. 이 경우 ChannelRoute.model() 메서드로 임시 채널을 만들고 (예 : 프로그램이없는 경우) App.ChannelsStore에 넣을 수 있습니다. 전체 데이터 트리를 구축하기위한 논리는 ChannelsStore를 검사하여 주어진 ID를 가진 객체가 이미 존재하는지 확인하고, 존재한다면 ID를 업데이트해야합니다. 당신은 같은 끝낼 :

App.ChannelRoute = Ember.Route.extend({ 
    model: function(params) { 
    var channel = App.ChannelsStore[params.channel_id]; 
    // create stub version if not found 
    if (!channel) { 
     channel = App.ChannelData.create({ID: params.channel_id}); 
     App.ChannelsStore[params.channel_id] = channel; 
    } 
    return channel; 
    } 
}); 

(당신은 유사 ProgrammeStore 구축을 끝낼 수 있지만,이 같은 단지 더.)

임시 객체의 갱신은 실제로 매우 멋진 모습을 보여줍니다 ember가 임시 객체의 값으로 표시 될 수 있지만 Ajax 호출이 완료되고 채널 및 프로그램이 모두로드되면 사용자 Ui가 올바르게 업데이트됩니다. set() 메서드를 사용하여 객체를 업데이트하고 ui 템플릿이 부분 데이터로 작업하게되어 기쁩니다.