2

我有一个使用 LI itemView 创建 UL 的 collectionView。

我想在下划线模板中使用项目索引号（计数）。IE：

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

我刚刚找到了一个简单的方法来做到这一点。（使用木偶 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 回答