0

タイトルが達成する必要があるかどうかを説明している場合はそうではありませんが、より良い提案があれば後で変更できます。

クライアント側で大量のデータを管理するために KO を使用しています。

これが基本です。

  1. 私はトレーニングセッションのリストを持っています
  2. それぞれにトレーニングセッションのパーツのリストがあります
  3. 各トレーニング セッションのパーツは、他のリストに保持されている項目を参照しています。たとえば、アクティビティのリストがあります (例: サイクリング、ランニング、水泳など)。
  4. 各アクティビティは、特定のセッションで使用されたアクティビティを識別するためにトレーニング セッション パーツで使用される ID によって識別されます。

現在、これらのリストはすべて監視可能な配列として保存され、リストの各メンバーは監視可能です (KO.Mapping を使用して、サーバーからの JSON をマップします)。

UI でトレーニング セッションを表示するときに、さまざまなリストからさまざまな情報を表示したい

所要時間: 1 時間 30 分
アクティビティ: サイクリング
プロセス: インターバル

トレーニング セッションをそのコンポーネントにリンクするために私が持っている唯一の情報は、問題のない ID です。よくわからないのは、アクティビティの名前 (テキスト) を<p>orにデータバインドして、アクティビティ<div>を編集すると (アプリケーションの機能を使用して) 名前が変わるようにする方法です。

トレーニング セッションにはアクティビティを識別する ID しかないため、ID に基づいてアクティビティの名前をバインドする方法がわかりません。

うまくいけば、これは理にかなっており、誰かが私がそれを理解するのを手伝ってくれることを願っています. 観測可能な配列にバインドする方法に関する多くの情報を見つけましたが、ID とリンクされた情報に対処するものは何もありませんでした。

4

1 に答える 1

0

最も簡単な方法は、おそらく独自のコンストラクターを作成し、データを手動でリンクすることです。本当に必要な場合はマッピングを使用できますが、基本的には同じ手動リンクを行う必要があり、より詳細な形式でのみ行う必要があります。

これは実装例のフィドルです: http://jsfiddle.net/aKpS9/3/

コードの最も重要な部分はリンクです。パーツの新しいアクティビティ オブジェクトを作成するのではなく、アクティビティ オブジェクトを 1 回だけ作成し、どこでも同じオブジェクトを使用するように注意する必要があります。

var TrainingSession = function(rawData, actualActivities){
    var self = this;
    self.name = ko.observable(rawData.name);
    self.parts = ko.observableArray(ko.utils.arrayMap(rawData.parts, function(rawPart){
        return ko.utils.arrayFirst(actualActivities(), function(ac){
            return ac.ID() == rawPart.ID;
        })
    }));
}

var Activity = function(rawData){
    var self = this;
    self.ID = ko.observable(rawData.ID);
    self.name = ko.observable(rawData.name);
}

var MainVM = function(rawData){
    var self = this;
    //first create an array of all activities
    self.activities = ko.observableArray(ko.utils.arrayMap(rawData.activities, function(rawAc){
        return new Activity(rawAc);
    }));

    self.trainingSessions = ko.observableArray(ko.utils.arrayMap(rawData.trainingSessions, function(session){
        return new TrainingSession(session, self.activities);
    }));

}
于 2013-11-09T11:37:22.640 に答える