如何在BackboneJS *牵线木偶* collectionView中打印行线？

Question

我有一个使用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> 

赞赏任何帮助，

欢呼声，

Answer 1

这应该很容易，作为一个集合中的模型可以很容易地获得你需要的信息。您需要在模型周围创建一个“视图模型”包装，以便您可以抓取所需的额外信息。

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从原始模型中取出，然后使用您需要的任何数据对其进行扩充。您的原始模型从不修改，但项目视图使用的模型具有您需要的数据。

Answer 2

我刚刚找到了一个简单的方法来做到这一点。 （with Marionette v1.0.0-rc6）

使用templateHelpers property。

在您的项目视图：

<%= index %> 

这就是：

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

    templateHelpers: function(){ 

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

    } 
}); 

在你的模板，你可以打印索引。