Backbone.jsのコレクションは、単純な順序付けられたセットモデルです。モデルとコレクションに適応することにより、ビューレイヤーに配置されるデータ処理ロジックを回避できます。さらに、モデルとコレクションは、バックエンドで作業する便利な方法を提供し、データが変更されると、backbone.jsビューを自動的にマークすることができます。このようにして、次の場合に使用できます。
コードコピーは次のとおりです。
モデル:動物、コレクション:動物園
通常、セットは1つのモデルにのみ適していますが、モデル自体はセットのタイプに限定されません。
コードコピーは次のとおりです。
モデル:個人、コレクション:オフィス
モデル:人、コレクション:ホーム
一般的なモデル/セットの例は次のとおりです。
コードコピーは次のとおりです。
var music = backbone.model.extend({
初期化:function(){
console.log( "Welcome to the Music World");
}
});
varアルバム= backbone.collection.extend({
モデル:音楽
});
上記のコードは、コレクションの作成方法を説明しています。しかし、それはデータを使用してセットを操作するプロセスを教えてくれません。それでは、このプロセスを探りましょう。
コードコピーは次のとおりです。
var music = backbone.model.extend({
デフォルト:{
名前:「指定されていない」、
アーティスト:「指定されていない」
}、
初期化:function(){
console.log( "Welcome to the Music World"); }
});
varアルバム= backbone.collection.extend({
モデル:音楽
});
var music1 = new music({id:1、name: "how bizarre"、artist: "omc"});
var Music 2 = new Music({id:2、name: "What What Burts the Most"、Artist: "Rascal Flatts"});
var myalbum = new Album([Music 1、Music 2]);
console.log(myalbum.models);
Backbone.jsコレクションとその他のコンポーネントの関係を見てみましょう。
1.コレクションにモデルを追加します
私たちが知っているように、セットはモデルのコレクションです。したがって、コレクションにモデルを追加できます。コレクションにモデルを追加するには、ADDメソッドを使用できます。また、Unshiftメソッドを使用して、コレクションの開始にモデルを追加することもできます。
コードコピーは次のとおりです。
var music3 = new Music({id:3、name: "yes i do"、Artist: "Rascal Flatts"});
Music.Add(Music3);
console.log( '新曲追加');
console.log(json.stringify(music));
2。セットからモデルを削除します
多くの場合、コレクションから指定されたデータを削除する必要があります。コレクションからモデルを削除するには、モデルのIDを提供する必要があります。元のコレクションを完全な新しいデータセットに置き換える場合は、リセットメソッドを使用できます。
コードコピーは次のとおりです。
Music.Remove(1);
console.log( 'どのように奇妙な削除...');
console.log(json.stringify(music));
3。取得して設定します
コードの他の場所でコレクションから値を取得する必要がある場合は、GETメソッドを直接使用できます。この時点で、検索でID値をモデルに渡します。
コードコピーは次のとおりです。
console.log(json.stringify(music.get(2)));
セットのセットメソッドの興味深い実装があります。セットメソッドは、モデルリストを渡すことにより、コレクションの「インテリジェント」更新を実行します。リスト内のモデルがコレクションにない場合、コレクションに追加されます。モデルがすでにコレクションにある場合、そのプロパティはマージされます。コレクションにリストに属さないモデルが含まれている場合、モデルは削除されます。
コードコピーは次のとおりです。
var music = backbone.model.extend({
//この属性はデフォルトとして設定する必要があります
デフォルト:{
名前: ''
}、
//コレクションのようにID属性を設定します
idattribute: 'id'
});
var song = backbone.collection.extend({
モデル:音楽
});
var models = [{
名前:「OMC」、
ID:1
}、{
名前:「フラッツ」、
ID:2
}];
var collection = new Song(モデル);
collection.bind( 'add'、function(model){
アラート( 'addb')
});
collection.bind( 'remove'、function(){
アラート( 'add')
});
モデル= [{
名前:「OMC」、
ID:1
}、{
名前:「フラッツ」、
ID:2
}、{
名前:「ジャクソン」、
ID:3
}];
collection.add(モデル);
});
上で見たように、事前に2つのモデルが既にあり、3番目のモデルを追加したとき、以前のモデルは同じままでした。
IV。コンストラクターと初期化
コレクションを作成すると、モデルの初期化された配列を渡すことができます。セットのコンパレーターをオプションとして追加できます。合格したコンパレータオプションがfalseの場合、ソートが防止されます。初期化関数を定義する場合、この関数はコレクションが作成されたときに呼び出されます。以下は、提供されている場合、いくつかのオプションをセットに直接追加します:モデルとコンパレータ。
コードコピーは次のとおりです。
var tabs = new Tabset([Tab1、Tab2、Tab3]);
var Spaces = new Backbone.collection([]、{
モデル:スペース
});
5。トジソン
TOJSOメソッドは、各モデルのハッシュ属性を含むコレクション内の配列を返します。この方法は通常、セット全体をシリアル化して持続するために使用されます。
コードコピーは次のとおりです。
var song = new backbone.collection([[
{名前:「フラッツ」}、
{name: "omc"}、
{名前:「ジャクソン」}
]);
alert(json.stringify(song));
6。コンパレータ
デフォルトでは、コレクションにはコンパレータがありません。コンパレータを定義する場合、セットを何らかの種類に保つために使用できます。これは、モデルを追加すると、モデルがコレクション内の適切な場所に挿入されることを意味します。コンパレータはsortbyで定義することも、文字列内のソート付きプロパティを示します。
ソートバイコンパレータ関数はモデルを取得し、数字または文字列を返します。
ソートコンパレータ関数は2つのモデルを取得します。最初のモデルが2番目のモデルの前にある場合、-1を返します。 2つのモデルが同じレベルの場合、0を返します。 2番目のモデルが最初のモデルの前にある場合、1を返します。
以下の例を見てみましょう。
コードコピーは次のとおりです。
var Student = backbone.model;
var学生= new backbone.collection;
Students.comParator = 'name';
desustor.add(new Student({name: "name1"、roll:9}));
desustom.add(new Student({name: "name2"、roll:5}));
desustom.add(new Student({name: "name3"、roll:1}));
alert(sustent.pluck( 'roll'));
モデルのプロパティを変更しても、比較対象のセットは自動的に並べ替えられません。したがって、モデル属性を変更した後、推定がソートに影響を与える場合、ソートを呼び出す必要があります。
7。ソート
コレクションにモデルを追加するときは、コレクションを並べ替えることを余儀なくされる必要があります。コレクションモデルを追加するときにソートを無効にするには、{sort:false}パラメーターを渡すことができます。ソートされたトリガーを呼び出すと、このパラメーターがチェックされます。
コードコピーは次のとおりです。
sortbytype:function(type){
this.sortkey = type;
this.sort();
}
機能を表示:
コードコピーは次のとおりです。
sortthingsbycolumn:function(event){
var type = event.currenttarget.classlist [0]
this.collections.things.sortbytype(タイプ)
this.render()
}
8。ピッキング
Pluck:コレクション内の各モデルから1つの属性を選択します。これは、イテレーターからマップを呼び出して単一の属性を返すのと同等です。
コードコピーは次のとおりです。
var song = new backbone.collection([[
{名前:「フラッツ」}、
{name: "omc"}、
{名前:「ジャクソン」}
]);
var names = songs.pluck( "name");
alert(json.stringify(names));
9。ここで
場所:フィルターを使用して、通過したプロパティに一致するコレクション内のモデルの配列を返します。
コードコピーは次のとおりです。
var song = new backbone.collection([[
{名前:「はい私がします」、アーティスト:「フラッツ」}、
{name: "how bizarre"、アーティスト: "how bizarre"}、
{名前:「何が最も痛いのか」、アーティスト:「フラッツ」}、
]);
var artists = song.where({Artist: "Flatts"});
Alert(Artists.length);
10。URL
コレクション内のURLプロパティの設定は、サーバーの場所を参照します。コレクション内のモデルは、このURLを使用して独自のURLを構築します。
コードコピーは次のとおりです。
var songs = backbone.collection.extend({
url: '/songs'
});
var songs = backbone.collection.extend({
url:function(){
this.document.url() + '/songs'を返します。
}
});
11。分析
パース:サーバーがコレクションのモデルを返すかどうかに関係なく、フェッチするときにバックボーンによって呼び出されます。この関数は、コレクションに追加されたモデルプロパティの配列を返す必要がある元の応答オブジェクトを渡します。デフォルトの実装は、no-op操作です。 JSON応答を単純に通過し、既存のAPIまたはより良い名前空間応答でこれを上書きします。
コードコピーは次のとおりです。
var songs = backbone.collection.extend({
parse:function(response){
RESPONSE.RESULTSを返します。
}
});
12。抽出
フェッチ:サーバーからコレクションのデフォルトモデルセットを抽出し、検索後にコレクションに設定します。このオプションハッシュは、成功またはエラーコールバックを受け入れ、3つのパラメーター(セット、応答、オプション)を渡します。次に、サーバーからモデルデータを返します。マージされた抽出モデルのセットアップに使用されます。
コードコピーは次のとおりです。
backbone.sync = function(method、model){
アラート(method + ":" + model.url);
};
var songs = new backbone.collection;
songs.url = '/songs';
songs.fetch();
上記のように、コードの品質を向上させるためにそれらをマスターする方法はたくさんあります。