Is there a way to change Marionette ItemView template dynamically with RequireJS?

Robert Bokori picture Robert Bokori · Mar 20, 2013 · Viewed 11.7k times · Source

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!

Answer

kirill.buga picture kirill.buga · Jul 2, 2013

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";
    }
  }
});