Backbone.js_Others のコレクションの詳細な説明

Backbone.js のコレクションは、単なる単純な順序セット モデルです。モデルとコレクションを適応させることで、ビュー層にデータ処理ロジックを配置することを避けることができます。さらに、モデルとコレクションは、データ変更時に Backbone.js ビューを自動的にマークするバックエンドと連携する便利な方法を提供します。このように、次のような状況で使用できます:

コードをコピー コードは次のとおりです:

モデル: 動物、コレクション: 動物園

通常、コレクションは 1 つのモデルにのみ適合しますが、モデル自体はコレクションのタイプに限定されません。

コードをコピー コードは次のとおりです:

モデル: 人物、コレクション: オフィス
モデル: 人物、コレクション: ホーム

一般的なモデル/コレクションの例を次に示します:

コードをコピー コードは次のとおりです:

var Music = Backbone.Model.extend({
初期化: function(){
console.log("音楽の世界へようこそ");
}
});
var Album = Backbone.Collection.extend({
モデル: 音楽
});

上記のコードは、コレクションを作成する方法を示しています。しかし、データを使用してコレクションを操作するプロセスについては説明しません。それでは、プロセスを見てみましょう:

コードをコピー コードは次のとおりです:

var Music = Backbone.Model.extend({
デフォルト: {
名前: "指定されていません"、
アーティスト: 「指定されていません」
}、
初期化: function(){
console.log("音楽の世界へようこそ "); });
var Album = Backbone.Collection.extend({
モデル: 音楽
});
var music1 = 新しい音楽 ({ id: 1 ,name: "How Bizarre", アーティスト: "OMC" });
var music 2 = 新しい音楽 ({id: 2, 名前: "What Hurts the Most"、アーティスト: "Rascal Flatts" });
var myAlbum = 新しいアルバム([音楽 1, 音楽 2]);
console.log( myAlbum.models );

Backbone.js コレクションと他のコンポーネントの関係を見てみましょう:

1. コレクションにモデルを追加します

ご存知のとおり、コレクションとはモデルのコレクションです。したがって、コレクションにモデルを追加できます。モデルをコレクションに追加するには、add メソッドを使用します。 unshift メソッドを使用して、コレクションの先頭にモデルを追加することもできます。

コードをコピー コードは次のとおりです:

var music3 = new Music({ id: 3, name: "Yes I Do", アーティスト: "Rascal Flatts" });

Music.add(music3);
console.log('新しい曲が追加されました');
console.log(JSON.stringify(音楽));

2. コレクションからモデルを削除します
多くの場合、指定されたデータをコレクションから削除する必要があります。コレクションからモデルを削除するには、モデルの ID を指定する必要があります。元のコレクションを完全な新しいデータセットに置き換えたい場合は、リセットメソッドを使用できます。

コードをコピー コードは次のとおりです:

Music.remove(1);

console.log('奇妙な削除方法...');
console.log(JSON.stringify(音楽));

3. 取得と設定

コード内の他の場所でコレクションから値を取得する必要がある場合は、get メソッドを直接使用できます。この時点で、ID 値を取得でモデルに渡します。

コードをコピー コードは次のとおりです:

console.log(JSON.stringify(Music.get(2)));

コレクションの set メソッドには興味深い実装があります。 set メソッドは、モデルのリストを渡すことによって、コレクションの「インテリジェントな」更新を実行します。リスト内のモデルがまだコレクションにない場合は、コレクションに追加されます。モデルがすでにコレクション内にある場合、そのプロパティはマージされます。リストに含まれていないモデルがコレクションに含まれている場合、そのモデルは削除されます。

コードをコピー コードは次のとおりです:

var Music = Backbone.Model.extend({
// この属性はデフォルトとして設定する必要があります
デフォルト: {
名前: ''
}、
// コレクションが // id 属性を設定します。 idAttribute: 'id'
});
var Song = Backbone.Collection.extend({
モデル: 音楽
});
var モデル = [{
名前: 'OMC'、
id: 1
}、{
名前: 'フラッツ'、
id: 2
}];
var collection = 新しい曲(モデル);
Collection.bind('add', 関数 (モデル) {
アラート('addb')
});
Collection.bind('remove', function () {
アラート('追加')
});
モデル = [{
名前: 'OMC'、
id:1
}、{
名前: 'フラッツ'、
id: 2
}、{
名前: ' ジャクソン '、
id: 3
}];
Collection.add(モデル);
});

上でわかるように、事前に 2 つのモデルがあり、3 番目のモデルを追加したとき、以前のモデルは変更されませんでした。

4. コンストラクターと初期化

コレクションを作成するときに、モデルの初期化配列を渡すことができます。オプションとしてコレクションコンパレータを追加できます。渡されたコンパレータ オプションが false の場合、並べ替えは禁止されます。初期化関数を定義すると、コレクションの作成時にこの関数が呼び出されます。いくつかのオプションを以下に説明します。モデルとコンパレーターは、指定されている場合、コレクションに直接追加されます。

コードをコピー コードは次のとおりです:

var tabs = new TabSet([tab1, tab2, tab3]);
var space = new Backbone.Collection([], {
モデル: 宇宙
});

5.toJSON

toJSO メソッドは、コレクション内の各モデルのハッシュ プロパティを含む配列を返します。このメソッドは通常、コレクション全体をシリアル化して永続化するために使用されます。

コードをコピー コードは次のとおりです:

var Song = 新しい Backbone.Collection([
{名前: "フラッツ"}、
{名前: "OMC"}、
{名前: "ジャクソン"}
]);
alert(JSON.stringify(song));

6. コンパレータ

デフォルトでは、コレクションにはコンパレータがありません。コンパレーターを定義すると、コレクション上で特定の順序を維持するために使用できます。これは、モデルが追加されると、コレクションの適切な場所に挿入されることを意味します。コンパレータは、sortBy または並べ替え属性を示す文字列を使用して定義できます。

sortBy コンパレータ関数はモデルを取得し、数値または文字列を返します。

ソート比較関数は 2 つのモデルを取得します。最初のモデルが 2 番目のモデルより前にある場合は -1 を返し、2 番目のモデルが最初のモデルより前にある場合は 0 を返します。 1 つのモデルの場合、1 が返されます。

例を見てみましょう:

コードをコピー コードは次のとおりです:

var Student = Backbone.Model;
var students = 新しい Backbone.Collection;
students.comparator = '名前';
students.add(新しい学生({名前: "名前1", ロール: 9}));
students.add(新しい学生({名前: "名前2", ロール: 5}));
students.add(新しい学生({名前: "名前3", ロール: 1}));
alert(students.pluck('roll'));

モデルのプロパティを変更した場合でも、コンパレータのコレクションは自動的に並べ替えられません。したがって、モデル属性を変更した後に並べ替えが影響を受けると推定される場合は、並べ替えを呼び出す必要があります。

7. 並べ替え

モデルがコレクションに追加されたときに、コレクションの順序を強制的に変更する必要があります。モデルをコレクションに追加するときに並べ替えを無効にするには、{sort: false} パラメーターを渡します。ソートを呼び出すトリガーは、このパラメーターをチェックします。

コードをコピー コードは次のとおりです:

sortByType: 関数(タイプ) {
this.sortKey = タイプ;
this.sort();
}

ビュー関数:

コードをコピー コードは次のとおりです:

sortThingsByColumn: 関数(イベント) {
var type = events.currentTarget.classList[0]
this.collections.things.sortByType(type)
this.render()
}

8.ピッキング

Pluck: コレクション内の各モデルから属性を選択します。これは、イテレーターから Map を呼び出して 1 つの属性を返すことと同じです。

コードをコピー コードは次のとおりです:

var Song = 新しい Backbone.Collection([
{名前: "フラッツ"}、
{名前: "OMC"}、
{名前: "ジャクソン"}
]);
var names = songs.pluck("name");
alert(JSON.stringify(names));

9.どこ

ここで: フィルターを使用して、渡された属性に一致するコレクション内のすべてのモデルの配列を返します。

コードをコピー コードは次のとおりです:

var Song = 新しい Backbone.Collection([
{名前: "Yes I Do"、アーティスト: "Flatts"}、
{名前: "ハウ・ビザール"、アーティスト: "ハウ・ビザール"}、
{名前: "What Hurts the Most"、アーティスト: "Flatts"}、
]);
var Artist = Song.where({アーティスト: "フラッツ"});
アラート(アーティスト.長さ);

10.URL
サーバーの場所を参照する URL 属性をコレクションに設定します。コレクション内のモデルは、この URL を使用して独自の URL を構築します。

コードをコピー コードは次のとおりです:

var Songs = Backbone.Collection.extend({
URL: '/songs'
});
var Songs = Backbone.Collection.extend({
URL: function() {
this.document.url() '/songs';
を返す }
});

11. 分析
Parse: サーバーがコレクションのモデルを返すかどうかに関係なく、フェッチ時にバックボーンによって呼び出されます。この関数には元の応答オブジェクトが渡され、コレクションに追加されるモデル プロパティの配列を返す必要があります。デフォルトの実装は no-op です。 JSON 応答を渡すか、既存の API でこの操作をオーバーライドするか、応答に名前空間を付けるだけです。

コードをコピー コードは次のとおりです:

var songs = Backbone.Collection.extend({
解析: function(response) {
応答を返します。結果;
}
});

12.抽出
Fetch: コレクションのデフォルトのモデルセットをサーバーからフェッチし、取得後にコレクションに設定します。このオプション ハッシュは成功またはエラーのコールバックを受け入れ、3 つのパラメーター (コレクション、応答、オプション) を渡します。その後、モデル データがサーバーから返されます。これは、マージされた抽出モデルをセットアップするために使用されます。

コードをコピー コードは次のとおりです:

Backbone.sync = function(メソッド, モデル) {
アラート(メソッド ": " モデル.url);
};
var songs = 新しいBackbone.Collection;
songs.url = '/songs';
songs.fetch();

上記のとおり、Backbone のコレクションだけでも非常に多くのメソッドがあり、それらをマスターすることでコードの品質を向上させることができます。