0

バックボーンを使用して Web アプリケーションを作成しています。ウェブページにサムネイルの一覧をグリッド形式で表示します。

バックボーン コレクションをリッスンする PhotosView というビューを作成しました。

PhotosView = Backbone.View.extend({
    template: _.template( $('#container').html() ),

次に、写真ごとに、そのリストの各サムネイルを表す別のビューを作成しました

EachPhotoView = Backbone.View.extend({
    template: _.template($('#thumbnail').html()),

Photos ビューはコレクションをリッスンしており、リセット イベントで、表示されるすべての写真の EachPhotoView を作成します。次に、各 PhotoView は、それに関連付けられたモデルの変更イベントをリッスンします。

私は今、これらのサムネイルを改ページしようとしています。ここでは、表示されているサムネイルのみを要求しますが、すべての画像のプレースホルダーを作成する必要があります。

だから私の質問は、コレクションに空のバックボーンモデルの数を入力するのは良い考えですか?将来、実際にそれらのモデルを取得したら、コレクションからそれらを置き換えます. これにより、プレースホルダーを持つという私の問題が解決されます。これを行う他の方法はありますか？

編集: サムネイルのグリッド レイアウトについて話しています。たとえば、1 ページに 500 個あります。下にスクロールすると、これらの 500 個のパーツを要求しています。すべてのプレースホルダー (すべて 500 個) のサムネイルを作成する必要があります。コンテナー div に適切な高さ (500 個の画像の場合) を与えるため、コレクション内に 500 個のモデルすべてを含める必要があります (ダミーですが)。これにより、ビューのイベントをそれらの空のモデルにアタッチし、それらのサムネイルのメタデータを取得したら、追加しますコレクション内の対応するモデルに含まれています。

4

2 に答える 2

1

私の理解が正しければ、サムネイルのグリッド (たとえば 30 個のサムネイル) と戻る/進むボタンが表示されます。

私がすることは、コレクションが表示されているアイテムのみを表し、戻る/進むボタンを使用して this.page プロパティを変更し、fetch()コレクション全体を再作成することです (内部の 30 個のサムネイルを次のページの 30 個に置き換えます)。

このコードは、ページ分割されたコレクションとページ分割されたビューを設定する方法の良い例です。

于 2013-02-08T01:20:22.663 に答える
0

配置されているそれぞれModelには、すでにどこかに関連付けられたレコードがあると思います。そうでない場合は、Data Sourceそれらを含める必要があり、クライアント側はそのレコードViewに基づいてそれらをレンダリングします。Collection唯一欠けているのは、Imageこれらのレコードの一部に対応するものが現在利用できないことです。

それらは空になるModelsというプロパティを持ちます。imgSource次にView、プロパティが空であるかどうかを処理してチェックを実行し、imgSourcedefault を置き換えますThumbnail。

<img src="<%- imgSource ==='' ? '/images/default.jpg' : '/images/'+ imgSource %>" 
   alt="imgDesc" />
于 2013-02-08T18:42:44.113 に答える