Backbone templates: Using HBS to dynamically switch templates - backbone.js

Question

I found this example on here of how to use the HBS plug-in to manage templates. It seems like a great solution. #machineghost suggests using RequireJS to include templates like this:
define(['template!path/to/someTemplate'], function(someTemplate) {
var MyNewView = BaseView.extend({template: someTemplate});
$('body').append(new MyNewView().render().el);
}
This is great, except I need to dynamically switch templates. Here is an example of one of my views:
define([
'jquery',
'underscore',
'backbone',
'models/tableModel',
'collections/tablesCollection',
'views/tablesView'
], function($, _, Backbone, tableModel, tablesCollection, tablesView) {
var t = new tablesCollection(null, {url: 'applications-lab'});
return new tablesView({ collection: t, template: 'applications-lab-template', url: 'applications-lab'});
});
As you can seem, I'm passing in the template when the view is rendered. What I'm wondering is can I pass in a variable to the define statement that would tell Backbone which template path to use? I'm a newbie to Backbone and especially RequireJS, and am not sure. Suggestions anyone?

Answer 1

Preliminary notes:
require.js does not allow parameters in a module definition, define accepts a dependency array and a definition function :
define(['dep1', 'dep2', ...], function(dep1, dep2) {
})
I would not define a view, instantiate it and inject its el in the same module but feel free to mix and match to your taste
Let's start with a module defining a simple view with a default template, let's say views/templated.js
define(['backbone', 'hbs!path/to/defaultTemplate'],
function(Backbone, defaultTemplate) {
var MyNewView = Backbone.View.extend({
template: defaultTemplate,
initialize: function(opts) {
opts = opts || {};
// use the template defined in the options or on the prototype
this.template = opts.template || this.template;
}
});
return MyNewView;
});
Now you just have to pull you view definition and an optional template with require:
require(['views/templated', 'hbs!path/to/anotherTemplate'],
function(MyNewView, anotherTemplate) {
// a view with the default template
var v1 = new MyNewView();
// a view with a new template
var v2 = new MyNewView({
template: anotherTemplate
});
});
To create a new class with an overridden default template, you would define a new module (views/override.js)
define(['views/templated', 'hbs!path/to/anotherTemplate'],
function(MyNewView, anotherTemplate) {
var AnotherNewView = MyNewView.extend({
template: anotherTemplate
});
return AnotherNewView;
});
Finally, you can always change the template on a given instance by directly assigning a new value.
var v = new MyNewView();
v.template = tpl;
A Fiddle simulating the views hierarchy : http://jsfiddle.net/nikoshr/URddR/
Coming back to your code, your blocks could look like
require(['models/tableModel', 'collections/tablesCollection', 'views/templated', 'applications-lab-template'],
function(tableModel, tablesCollection, tablesView, tpl) {
var t = new tablesCollection(null, {url: 'applications-lab'});
var v = new tablesView({
collection: t,
template: tpl
url: 'applications-lab'
});
// or, if you prefer and you don't render in initialize
v.template = tpl;
});