ビューレイヤーでこれを行わないことを強くお勧めします。ビューに大量のコードを追加すると、このコードの多くが複数のビュー間で複製されることになります(1つはデータの表示用、1つはページリストとカウント用、もう1つは... )。
代わりに、デコレータパターンを使用して、これを処理する方法を知っているコレクションを作成します。これは、データのフィルタリング、並べ替え、ページングのために行いますが、非常にうまく機能します。
たとえば、フィルタリングを設定する方法は次のとおりです(JSFdiddleで実行:http://jsfiddle.net/derickbailey/vm7wK/)
function FilteredCollection(original){
var filtered = Object.create(original);
filtered.filter = function(criteria){
var items;
if (criteria){
items = original.where(criteria);
} else {
items = original.models;
}
filtered.reset(items);
};
return filtered;
}
var stuff = new Backbone.Collection();
var filtered = FilteredCollection(stuff);
var view = Backbone.View.extend({
initialize: function(){
this.collection.on("reset", this.render, this);
},
render: function(){
var result = this.collection.map(function(item){ return item.get("foo"); });
this.$el.html(result.join(","));
}
});
あなたの場合、このようなフィルタリングは行いません...しかし、ページングとストリーミングの考え方は同じです。
「PagingCollection」で現在のページ番号を追跡し、元のコレクションがリセットされるか、新しいデータが追加されると、PagingCollection関数は最終的なpagedCollectionインスタンスに必要なデータを再計算します。そのコレクションを必要なデータでリセットします。
このようなもの(これはテストされておらず、不完全ですが、アプリのニーズに合わせて詳細を入力して具体化する必要があります)
function PagingCollection(original){
var paged = Object.create(original);
paged.currentPage = 0;
paged.totalPages = 0;
paged.pageSize = 0;
paged.setPageSize = function(size){
paged.pageSize = size;
};
original.on("reset", function(){
paged.currentPage = 0;
paged.totalPages = original.length / paged.pageSize;
// get the models you need from "original" and then
// call paged.reset(models) with that list
});
original.on("add", function(){
paged.currentPage = 0;
paged.totalPages = original.length / paged.pageSize;
// get the models you need from "original" and then
// call paged.reset(models) with that list
});
return paged;
}
コレクションをページング情報で装飾したら、ページングされたコレクションをCollectionViewまたはCompositeViewインスタンスに渡します。これらは、渡したコレクションで見つかったモデルを適切にレンダリングします。
CollectionViewとCompositeViewについて...CompositeViewはCollectionView(コレクションから直接拡張)であり、コレクションの周囲にモデル/テンプレートをレンダリングできます。これが大部分の違いです...どちらもコレクションを処理し、そのコレクションからのビューのリストをレンダリングします。