I'm trying to manipulate itemViews dynamically in a Marionette CollectionView. The collections have the same models, but i defined templateName argument inside the models.
The question is, can i manipulate the ItemView template by this argument?
ItemView:
define(['text!templates/ComponentItemViewTemplate.html','models/ComponentModel'], function (template, model) {
var ItemView = Backbone.Marionette.ItemView.extend({
template: _.template(template),
model: model
});
return ItemView;
});
CollectionView:
define(['views/ComponentItemView', 'views/LoadingView'], function(ItemView, LoadingView) {
var ComponentListView = Backbone.Marionette.CollectionView.extend({
emptyView : LoadingView,
id: "component-list",
itemView: ItemView,
events: {
'click .title span' : 'show'
},
appendHtml: function(collectionView, itemView, index){//i would like to render different templates, for different models.
itemView.$el.draggable({ helper: "clone", cancel: ".component .title span", connectToSortable: ".ui-sortable" });
collectionView.$el.append(itemView.el);
},
show: function(r) {
var target = $(r.target);
if( target.parent().hasClass('open') ){
target.parent().removeClass('open');
target.parent().next().slideDown('fast');
}else{
target.parent().addClass('open');
target.parent().next().slideUp('fast');
}
}
});
return ComponentListView;
});
Thanks!
You can override getTemplate function and write your custom logic there. The Marionette documentation recommends the following option:
MyView = Backbone.Marionette.ItemView.extend({
getTemplate: function(){
if (this.model.get("foo")){
return "#some-template";
} else {
return "#a-different-template";
}
}
});