I have a Backbone.js view that I'm working with:
var StreamV = Backbone.View.extend({
tagName: 'div',
className: 'stream',
events: { },
initialize: function () {
this.listenTo(this.model, 'change', this.render);
},
render: function () {
this.$el.html(this.template(this.model.attributes));
return this;
},
template: function (data) {
console.log(data);
if (data.mime_type.match(/^audio\//)) {
return _.template('<audio controls><source src="<%= resource_uri %>">No sound</audio>', data);
} else {
// FIXME Do what?
return _.template();
}
},
});
Along with the model associated with it:
var StreamM = Backbone.Model.extend({
url: function () {
return (this.id) ? '/streams/' + this.id : '/streams';
}
});
To create an instance of the StreamV view, I do the following:
$(document).ready(function () {
var streams = new StreamsC;
streams.fetch({success: function (coll, resp, opts) {
var mp3 = coll.findWhere({mime_type: 'audio/mp3'});
if (mp3) {
var mp3view = new StreamV({el: $('#streams'),
model: mp3});
mp3view.render();
} else {
$('#streams').html('No audio/mp3 stream available.');
}
}});
});
However, when passing data to my Underscore template, I encounter the following error:
ReferenceError: The variable resource_uri is not defined
((__t=( resource_uri ))==null?'':__t)+
I've attempted to include a literal object with the resource_uri property in the _.template call but still face the same issue.
Is providing an object as the second argument to _.template the correct approach?