在Ember中關聯兩組JSON數據

Question

我正在分別加載兩組數據，但我希望它們是相關的。請允許我解釋一下。

首先，我沒有使用Ember-data，而是使用簡單的$.ajax包裝，如this post from one of the Discourse team中所述。

我有一個頻道和節目的概念。

頻道JSON：

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

我必須收集從這個JSON的ID，以便能夠然後請求程序這些通道。因此，從端點看起來有點像這樣的程序的響應：

程序JSON：

{ 
    "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" 
       } 
      ] 
     } 
    ] 
} 

每個Listings數組可以包含的項目X量和Channels對象數組與它們的請求順序（來自Channels.json的ID）有關，因此在這種情況下，Channels[0]是BBC1，而Channels[1]是BBC2。

我想是要求這兩個數據集作爲一個JSON每個但後來不知怎的涉及他們的請求。所以擁有一個擁有x個程序模型的通道控制器。我還需要在兩個不同的模板中渲染通道和程序

正在考慮我可以遍歷channels.json並使用該項目的索引來查找programmes.json中的相關項目並以此方式創建關係。

不太確定如何使用Ember來實現這一點。

謝謝

Answer 1

我做了一件非常相似的事情，並得到它在燼中工作。我會用你的物體勾畫出我所做的。請注意，我是相當新的燼，所以一粒鹽可能是必要的。

首先，你會希望有模型對象的「通道」，「通道」和「程序」。這將最終讓你擁有控制器和路由器，這些都可以很好地匹配ember的命名約定。 ChannelsData將會有很多ChannelData對象，並且每個ChannelData都會有很多ProgrammeData對象。你如何得到這些人口？

在你ChannelsRoute類，你可以有一個模型（）函數返回模型數據的這條路線。您的模型函數可以在ChannelsData上調用create（）來創建實例，然後在ChannelsData上調用loadAll函數。 ChannelsData使用您喜歡的ajax風格實現loadAll（）。最簡單最簡單的方法是讓該函數執行兩個Ajax調用並構建整個數據樹。

然後，您將發現，如果你輸入的路徑喜歡＃/渠道/ 105直接在瀏覽器中，你會如果你的ChannelRoute類嘗試調用它的模型（陷入困境），例如。要解決這個問題，請在您的App對象上創建一個自己的簡單對象庫，如App.ChannelsStore = {}，並且在創建每個Channel時，在ChannelsStore中（通過id）添加對它的引用。然後你的ChannelRoute.model函數可以從該商店查找它的模型。但是隻有ChannelsRoute.model先完成！

如果用戶輸入＃/ channels/105路由作爲第一次進入您的應用程序，那麼您的代碼將通過ChannelsRoute.model（）方法，並立即通過ChannelRoute.model（）方法，可能在你的ajax完成之前。在這種情況下，您可以讓ChannelRoute.model（）方法創建一個臨時通道（例如沒有程序），並將其放入App.ChannelsStore中。然後，用於構建整個數據樹的邏輯應該願意檢查ChannelsStore以查看具有給定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，但是這只是更多的相同。）

的臨時對象的更新實際上表明瞭一個非常酷的方面呃，這是你的用戶界面可能會顯示臨時對象的值，但是當你的Ajax調用完成並且頻道和程序全部加載 - 你的用戶界面會正確更新。只要確保使用set（）方法更新對象，並且您的UI模板很樂意使用部分數據。