web-dev-qa-db-ja.com

マリオネットテンプレートを使用したbackbone.jsコレクションビューの例

マリオネットテンプレートシステムでリストビューを表示する例を教えてください。基本的に、私はマリオネットテンプレートを持っており、そのテンプレートに基づいてテーブルリストを作成しています。

backbone.jsmarionettebackbone.js-collections
16
kulls

バックボーンマリオネットを使用してテーブル行のリストを作成するには、次の5つのことを定義する必要があります。

  • 各行のモデル
  • すべての行モデルを保持するコレクション
  • コレクションを反復処理するCollectionView
  • 行固有の機能を提供するItemView
  • 各行のマークアップを提供するItemViewのテンプレート

サンプルのユースケース

次のデータがあるとします。

var stooges = [{ name: 'moe', age: 44, userid: 1}, 
               { name: 'larry', age: 44, userid: 2}, 
               { name: 'curly', age: 44, userid: 3}];

モデルとコレクションを定義する

次のデータの場合、モデルが必要です。

var StoogeModel = Backbone.Model.extend({});

ここで、データやidAttributeなどの他のプロパティに適切なデフォルトを設定できます。モデルをカスタマイズする方法については、たくさんの参考資料があります。コレクションは、少なくともstoogeModelを取る必要があります。

var StoogeCollection = Backbone.Collection.extend({
  model: StoogeModel
});

ビューを設定する

コレクションを繰り返してテーブルにレンダリングするために必要なのは、CollectionViewとItemViewだけです。

var StoogesCollectionView = Backbone.Marionette.CollectionView.extend({
  tagName: "table",
  childView: StoogeItemView
});

すべてのCollectionViewsには少なくともchildViewが必要です。これはItemView（以下で定義）であり、各行のhtmlを作成する機能を導出するために使用します。 collectionは、各行に入力されるモデルを保持するコレクションです。 a stoogesCollectionViewをインスタンス化するときに、このコレクションを渡します。 tagNameプロパティは、子を​​tableタグにカプセル化するようにBackboneに指示します。

var StoogeItemView = Backbone.Marionette.ItemView.extend({
  tagName: "tr",
  template: '#stooge-template'
});

<script type="text/template" id="stooge-template">
  <td id="name"><%= name %></td>
  <td id="age"><%= age%></td>
  <td id="userid"><%= userid%></td>
</script>

すべてのItemViewsには、HTMLドキュメントで定義するテンプレートが必要です。ここでは#stooge-templateです。 ItemViewがコレクションの子である場合、そのモデルを定義する必要はありません。それは親CollectionViewによって提供されます。各子StoogeItemViewによってレンダリングされたHTMLはtrタグによってカプセル化されます。これは、コレクションビューの各子の行が必要だからです。

ItemViewから、行列のclickやfocusのように、「行」レベルでイベントを処理できます。渡されたモデルへの変更を処理することもできます。さらに、ItemViewから、テンプレートでのデータの表示方法を操作できるヘルパーを渡すことを決定できます。

すべてを一緒に入れて

これで、モデル、コレクション、コレクションビュー、子アイテムビュー、およびアイテムビューテンプレートが定義されました。次に、これらすべての部品を接続します。

コレクションにデータを入力します

ストゥージの配列をコレクションのコンストラクターに渡します。

var myStooges = new StoogeCollection(stooges);

これらはモデルに成形され、コレクションをロードします。

CollectionViewを改訂する

ロードしたコレクションをコレクションビューに渡します。

var myStoogesView = new StoogesCollectionView({ collection: myStooges  });

ビューをレンダリングする

すべてのMarionetteビューは、renderメソッドでパッケージ化されています。私たちの場合、

myStoogesView.render();

データセット内のname、age、およびuseridフィールドにそれぞれ列を持つ3つの<table>要素を持つ<tr>を作成します。結果のHTMLをDOMに挿入するには、ビューのelプロパティを使用するだけです。簡単にするために、ビューをボディに直接挿入できます

document.body.appendChild(myStoogesView.el);

またはjQueryを使用する：

$(document.body).append(myStoogesView.el);

この例を超えて

私たちが議論し始めさえしなかった多くの機能があります。 docs を読んでください！そして、多くの多くのチュートリアルをチェックしてください。この簡単な紹介がお役に立てば幸いです。

37
seebiscuit