KnockoutJSのデータ読み込みパターン
-
27-10-2019 - |
質問
knockoutjsが私のアプリケーションで機能するかどうかを理解しようとしています。私のデータモデル(簡素化)は次のとおりです。
function topic(data) {
this.id = data.id;
this.queries = ko.observableArray([]);
}
function query(data) {
this.id = data.id;
this.text = data.text;
this.searcher = data.searcherId;
this.postings = ko.observableArray([]);
}
function posting(data, query) {
this.documentId = data.docid;
this.rank = data.rank;
this.snippet = data.snippet;
this.score = data.score;
this.query = query;
this.document = null;
}
function document(data, topic) {
this.id = data.id;
this.url = data.url;
this.topic = topic;
}
与えられた topic
, 、1つ以上があります query
インスタンス。各クエリにはのリストが含まれています posting
インスタンス。各 posting
ドキュメントを指します。複数の posting
特定のものを参照できます document
限り posting
インスタンスは異なるものに属します query
インスタンス。
もし posting
新しいドキュメントを指します(まだ取得されていません query
)新しいインスタンスを作成したいと思います。場合 document
すでに存在します(IDは一意です)、私はそれを再利用したいと思います。
サーバーによって返されるJSONデータを構築するためのいくつかの可能な代替手段を見ることができます。
- 投稿をシリアル化するときは、最初にすべてのドキュメントのリストをシリアル化し、マスタードキュメントリストをそれらで更新します。次に、文書IDへの参照とともに投稿を送信します。
- 各ドキュメントを投稿のプロパティとして完全にシリアル化し、そのエントリが冗長であるかどうかを把握します。マスターリストに非冗長エントリを追加します。
データをシリアル化するための合理的なパターンは何ですか?これを簡潔に表現するマッピングプラグインマジックはありますか?私はJSONを生成しているサーバーを制御しており、それを何らかの方法で構成することができます。
ありがとう、
遺伝子
解決
これが私がオプション1を実装するために行ったことです:
function idField(data) {
return ko.utils.unwrapObservable(data.id);
}
function createMapping(type, context) {
return {
key: idField,
create: constructor(type, context)
}
}
function constructor(type, context) {
return function(options) {
return new type(options.data, context);
}
}
function createReferenceMapping(collection) {
return {
key: idField,
create: lookup(collection)
}
}
function lookup(collectionOrClosure) {
return function(options) {
var collection = (typeof collectionOrClosure == 'function') ? collectionOrClosure() : collectionOrClosure;
var object = collection.findById(options.data.idref);
if (object == null)
console.log("Error: Could not find object with id " + options.data.idref + " in ", collection);
return object;
}
}
このコードを次のように呼びます。
var mapping = {
people: createMapping(Searcher),
topics: createMapping(Topic, this),
activeTopic: createReferenceMapping(function(){return self.topics();})
};
this.dataChannel.loadModel(function(data) {
ko.mapping.fromJS(data, mapping, this);
}
これは、新しいインスタンスの作成の両方に注意してください( constructor
関数)および既存のものを介して検索します lookup
.
他のヒント
Checkout EntitySpaces.js、視聴できるビデオがあり、完全な階層データモデルをサポートし、WCF JSONサービスを生成することもできます。RestAPIもサポートします。
ノックアウトを使用するJavaScript orm(データアクセス)フレームワーク