1

2 つのデータ セットを別々に読み込んでいますが、関連付けたいと思います。説明させてください。

まず、私は Ember-data を使用していませんが、代わりに Discourse チームの 1 人からのこの投稿で$.ajax概説されている単純なラッパーを使用しています。

私はチャンネルとプログラムの概念を持っています。

チャネル 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 です。

私が望むのは、これら 2 つのデータ セットをそれぞれ 1 つの JSON リクエストとしてリクエストすることですが、何らかの方法でそれらを関連付けることです。したがって、x 量のプログラム モデルを持つチャネル コントローラーを使用します。また、チャネルとそのプログラムを 2 つの異なるテンプレートでレンダリングする必要があります

を反復処理しchannels.json、アイテムのインデックスを使用して関連するアイテムを検索し、programmes.jsonそのように関係を作成できると考えていました。

ただし、これを達成するために Ember を使用する方法がよくわかりません。

ありがとう

4

1 に答える 1

2

私はこれと非常によく似たことをして、それをemberで動かしました。あなたのオブジェクトを使用して、私がしたことをスケッチします。私は残り火にかなり慣れていないので、一粒の塩が必要になるかもしれないことに注意してください。

まず、「Channels」、「Channel」、「Programme」のモデル オブジェクトが必要です。これにより、最終的には、これらのそれぞれに対してコントローラーとルーターを使用できるようになり、ember の命名規則とうまく一致します。ChannelsData には多くの ChannelData オブジェクトがあり、各 ChannelData には多くの ProgrammeData オブジェクトがあります。これらをどのように設定しますか？

ChannelsRoute クラスでは、そのルートのモデル データを返す model() 関数を使用できます。モデル関数は、ChannelsData で create() を呼び出してインスタンスを作成し、次に ChannelsData で loadAll 関数を呼び出すことができます。ChannelsData は、お好みの ajax を使用して loadAll() を実装します。非常に簡単な最も簡単な方法は、その関数に両方の ajax 呼び出しを実行させ、データのツリー全体を構築させることです。

ChannelRoute クラスが model() を呼び出そうとすると、たとえば #/channels/105 のようなパスをブラウザに直接入力すると、問題が発生することがわかります。これを回避するには、App オブジェクトに独自の単純なオブジェクト ストアを作成します (App.ChannelsStore = {} など)。各チャネルを作成するときに、その参照を 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 を構築することになるかもしれませんが、それはほとんど同じです。)

一時オブジェクトの更新は、実際には ember の非常に優れた側面を示しています。つまり、一時オブジェクトからの値が UI に表示される可能性がありますが、ajax 呼び出しが完了し、チャンネルとプログラムがすべて読み込まれると、UI は適切に更新します。set() メソッドを使用してオブジェクトを更新し、UI テンプレートが部分的なデータを処理できることを確認してください。

于 2013-04-27T18:29:09.117 に答える