[英]how can i print the row line in BackboneJS *marionette* collectionView?
I have a collectionView that creates a UL using a LI itemView. 我有一个使用LI itemView创建UL的collectionView。
I wanted to use the item index number (count) in the underscore template. 我想在下划线模板中使用项索引号(count)。 ie:
即:
hello (item 0)
world (item 1)
Does anybody know how to use the count in marionette? 有人知道如何使用牵线木偶计数吗? i want to avoid putting it in the model.
我想避免把它放在模型中。
this is what i would like my itemView template to look like (with n as item count): 这就是我希望我的itemView模板看起来像(项目数为n):
<script id="task-template" type="text/html">
<div class="order"><%=n%></div>
<div class="title-container">
<a href="#">...</a>
</div>
</script>
any help appreciated, 任何帮助赞赏,
cheers, 干杯,
I have just found a easy way to do it. 我刚刚找到了一个简单的方法。 (with Marionette v1.0.0-rc6)
(使用Marionette v1.0.0-rc6)
Using templateHelpers property. 使用templateHelpers属性。
In your item view: 在商品视图中:
MyItemView = Backbone.Marionette.ItemView.extend({
template: "#my-item-view-template",
templateHelpers: function(){
var modelIndex = this.model.collection.indexOf(this.model);
return {
index: modelIndex
}
}
});
in your template you can print the index with: 在模板中,您可以使用以下命令打印索引:
<%= index %>
That's all. 就这样。
This should be easy, as a model in a collection can easily get the information you need. 这应该很简单,因为集合中的模型可以轻松获取所需的信息。 You'll need to create a "view model" wrapper around your model so that you can grab the extra info that you want.
您需要在模型周围创建一个“视图模型”包装器,以便您可以获取所需的额外信息。
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;
}
This view model will be used by your itemView, directly. 您的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
});
And that's it. 就是这样。
When you pass your collection in to the MyCollectionView
constructor and render the collection view, a new view model will be created for each itemView instance, at the time the itemView is instantiated. 将集合传递给
MyCollectionView
构造函数并呈现集合视图时,将在实例化MyCollectionView
为每个itemView实例创建新的视图模型。 The template can render the index
from the model now. 模板现在可以从模型中呈现
index
。
The view model inherits from the original model directly, so all of the methods and attributes are still available. 视图模型直接从原始模型继承,因此所有方法和属性仍然可用。 Overriding the
toJSON
method allows you to get the original json out of the original model, and then augment it with whatever data you need. 覆盖
toJSON
方法允许您从原始模型中获取原始json,然后使用您需要的任何数据对其进行扩充。 Your original model is never modified, but the model that the item view is using has the data you need. 您的原始模型永远不会被修改,但项目视图正在使用的模型具有您需要的数据。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.