2

LI itemView を使用して UL を作成する collectionView があります。

アンダースコア テンプレートでアイテム インデックス番号 (カウント) を使用したいと考えました。すなわち:

hello (item 0)
world (item 1)

マリオネットでカウントを使用する方法を知っている人はいますか? モデルに入れるのは避けたいです。

これは、itemView テンプレートを次のようにしたいものです (n をアイテム数として):

<script id="task-template" type="text/html">
          <div class="order"><%=n%></div>
          <div class="title-container">
               <a href="#">...</a>
          </div>
 </script>

助けていただければ幸いです。

乾杯、

4

2 に答える 2

9

私はそれを行う簡単な方法を見つけました。(Marionette v1.0.0-rc6を使用)

templateHelpersプロパティを使用します。

アイテムビュー:

MyItemView = Backbone.Marionette.ItemView.extend({
    template: "#my-item-view-template",

    templateHelpers: function(){

        var modelIndex = this.model.collection.indexOf(this.model);
        return {
            index: modelIndex
        }

    }
});

テンプレートでは、次のようにインデックスを印刷できます。

<%= index %>

それで全部です。

于 2013-03-14T06:10:55.830 に答える
3

コレクション内のモデルは必要な情報を簡単に取得できるため、これは簡単なはずです。必要な追加情報を取得できるように、モデルの周りに「ビュー モデル」ラッパーを作成する必要があります。


var createViewModel(model){

  // inherit from the original model
  var vm = Object.create(model);

  // override the original `toJSON` method
  vm.toJSON = function(){
    var json = model.toJSON();

    // add the index
    json.index = model.collection.indexOf(model);

    return json;
  }

  return vm;
}

このビュー モデルは、itemView によって直接使用されます。


MyItemView = Backbone.Marionette.ItemView.extend({
  template: "#my-item-view-template",

  initialize: function(){

    // replace the model with the the view model
    this.model = createViewModel(this.model);

  }
});

MyCollectionView = Backbone.Marionette.CollectionView({
  itemView: MyItemView
});

以上です。

コレクションをコンストラクターに渡してMyCollectionViewコレクション ビューをレンダリングすると、itemView がインスタンス化されるときに、itemView インスタンスごとに新しいビュー モデルが作成されます。indexテンプレートはモデルからレンダリングできます。

ビュー モデルは元のモデルから直接継承されるため、すべてのメソッドと属性を引き続き使用できます。メソッドをオーバーライドするtoJSONと、元のモデルから元の json を取得し、必要なデータを追加できます。元のモデルが変更されることはありませんが、アイテム ビューが使用しているモデルには必要なデータが含まれています。

于 2012-08-12T12:19:39.907 に答える