Marionette, how to change view's template on fly

Question

I'm doing a single page webApp with Marionette and RequireJs, basically it is a Layout view nested with a lots of ItemView and compositeView. I want the page change to a new design by one click, so I want to ask a best practice about changing the view's template.

say, I got my view like this, and its templates are included by requirejs's text plugin:

define([
        'text!templates/designNo1/template.html'
], function(template) {

    var MyView = Backbone.Marionette.ItemView.extend({

        /*Template*/
        template: template,

        initialize: function() {
            ......
        },

        onRender: function() {
            ......
        }
    });

    return SkillView;
});

every view and theirs subviews are defined like this. and their templates located in "template/designNo1" folder. now I got a set of new design located in "template/designNo2", and I want apply it to the page, but I found there is no chance to do this, because the views are already loaded by RequireJs and the template's path are hard-coded. of course, I can override the view's template when create the view's instance, but if I do so, I must load all the new design in the upper-module which create the instance, that looks bad, and the new design are keep coming, it gonna be a mess soon.

so, any advice?

Answer 1

From what I can tell, it sounds like you are wanting to change the template on a view depending on different circumstances. Marionette's ItemView has a getTemplate() function that is called when rendering it. You can specify a function that determines which template to render from there.

Another approach might be to simply change the template of the view and re-render it. You could do that on a click event easily:

HTML

<div class="content"></div>
<button class="btn">Change Template</button>

Javascript

var template1 = '<div>Template 1</div>';
var template2 = '<div>Template 2</div>';

var ItemView = Backbone.Marionette.ItemView.extend({
    template: template1
});

var itemView = new ItemView({ el: '.content' });
itemView.render();

$('.btn').click(function(e) {
    e.preventDefault();

    itemView.template = template2;
    itemView.render();
});