Marionette.js - ハイジャックコンポジットビュー機能を使用してストリーミングページングを作成する

Question

ストリーミングページングリストを作成しています。私たちは空のコレクションでアプリを起動し、アイテムを定期的にコレクションに追加します。コレクションのサイズがpage_size属性を渡すと、残りのモデルはレンダリングされませんが、compositeViewはクリックするページ番号を追加する必要があります。

get_page_results: function(page_number){ 
    var all_models = this.models; 

    var models_start = page_number * this.page_size; 
    var models_end = models_start + this.page_size; 

    //return array of results for that page 
    return all_models.slice(models_start,models_end); 
} 

：私はこのようなモデルのリストを返す私のコレクションで機能を持っていることで、現在のページ番号とページサイズに基づいてアイテムをレンダリング私のCompositeViewのための機能をレンダリングの作成を計画してい

私の質問は、でも、私はこれに対してMarionetteのコンポジットビューを使用する必要がありますか？私が望むものを得るために、MarionetteのcollectionViewのほとんどの機能を上書きしているようです。

私のコレクション内の項目数は、二つのことを更新する必要が変わるたびに：

• コレクションビューでitemViews
• 複合ビュー

の下部にページ番号

Answer 1

私は、ビューレイヤーでこれを行うことを強くお勧めします。あなたはあなたのビューに大量のコードを追加するつもりです。そして、あなたはこのコードの多くを複数のビューの間で複製することになります（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（直接から拡張されています）です。それは大部分の違いです...彼らはコレクションを扱い、そのコレクションからのビューのリストをレンダリングします。

Answer 2

私たちは、あなたがPaginatedMixinを使用することができますが、便利を見つけることがbakcbone.marionetteのためのミックスインのセット（https://github.com/g00fy-/marionette.generic/）

を構築している、PrefetchMixin +バックボーンコレクションをページ分割することができますので、あなたが通過する必要はありませんビューにプリフェッチされたコレクション。

あなたがしなければならないだろう唯一のコードは次のとおりです。

YourListView = Generic.ListView.mixin(PaginatedMixin,LoadingMixin,PrefetchMixin).extend({ 
    paginateBy:10, 
    template:"#your-list-template", 
    itemViewOptions:{template:"#your-itemview-template"}, 
    fetchPage:function(page){ 
     this.page = page; 
     return this.collection.refetch({data:{page:page}}); // your code here 
    }, 
    hasNextPage:function(){ 
     return true; // your code here 
    }, 
}); 

作業たとえば、あなたが自然にコレクションビューでそれを行うことができれば、その方がよいでしょうhttps://github.com/g00fy-/stack.reader/blob/master/js/views.js