I'm getting Uncaught ReferenceError with text: Id is not defined exception

Uncaught ReferenceError: Id is not defined
(anonymous function)
y.templateunderscore-min.js:5
Backbone.View.extend.renderProductView.js:13
Backbone.View.extend.renderProductListView.js:15
Backbone.View.extend.initializeProductListView.js:4
g.Viewbackbone-min.js:34
dbackbone-min.js:38
appRouter.on.productsList.fetch.successAppRouter.js:18
f.extend.fetch.a.successbackbone-min.js:23
f.Callbacks.ojquery-1.7.2.min.js:2
f.Callbacks.p.fireWithjquery-1.7.2.min.js:2
wjquery-1.7.2.min.js:4
f.support.ajax.f.ajaxTransport.send.d

Being stored in external file, the template looks like this:

<a class="thumbnail" href="#/products/<%= Id %>">
    <img alt="" src="/Content/img/<%= Thumbnail %>" />
    <h5><%= Title %></h5>
    <p><%= Price %></p>
    <p><%= Details %></p>
</a>

Its corresponding view defines render method as:

define(['jquery', 'underscore', 'backbone', 'text!templates/product.html'], function ($, _, Backbone, productTemplate) {
var ProductView = 
...

render: function() {
    var data = {};
    var piledTemplate = _.template(productTemplate, data);
    this.$el.append(piledTemplate);
}
...

What can cause the exception to be thrown? Thanks!

EDIT

Model defines defaults like:

defaults: {
    Id: '00000000-0000-0000-0000-000000000000',
    Price: 0.0,
    Category: 'empty',
    Title: 'untitled',
    Details: '',
    Thumbnail: ''
}

I'm getting Uncaught ReferenceError with text: Id is not defined exception

Uncaught ReferenceError: Id is not defined
(anonymous function)
y.templateunderscore-min.js:5
Backbone.View.extend.renderProductView.js:13
Backbone.View.extend.renderProductListView.js:15
Backbone.View.extend.initializeProductListView.js:4
g.Viewbackbone-min.js:34
dbackbone-min.js:38
appRouter.on.productsList.fetch.successAppRouter.js:18
f.extend.fetch.a.successbackbone-min.js:23
f.Callbacks.ojquery-1.7.2.min.js:2
f.Callbacks.p.fireWithjquery-1.7.2.min.js:2
wjquery-1.7.2.min.js:4
f.support.ajax.f.ajaxTransport.send.d

Being stored in external file, the template looks like this:

<a class="thumbnail" href="#/products/<%= Id %>">
    <img alt="" src="/Content/img/<%= Thumbnail %>" />
    <h5><%= Title %></h5>
    <p><%= Price %></p>
    <p><%= Details %></p>
</a>

Its corresponding view defines render method as:

define(['jquery', 'underscore', 'backbone', 'text!templates/product.html'], function ($, _, Backbone, productTemplate) {
var ProductView = 
...

render: function() {
    var data = {};
    var piledTemplate = _.template(productTemplate, data);
    this.$el.append(piledTemplate);
}
...

What can cause the exception to be thrown? Thanks!

EDIT

Model defines defaults like:

defaults: {
    Id: '00000000-0000-0000-0000-000000000000',
    Price: 0.0,
    Category: 'empty',
    Title: 'untitled',
    Details: '',
    Thumbnail: ''
}

• javascript
• jquery
• backbone.js
• requirejs
• underscore.js

2 Answers 2

You need to supply values for all interpolated variables. A template like this:

<%= Id %>

is piled into a JavaScript function that is a wrapper around something like this:

with(obj || {}) {
    __p += '' + ((__t = Id) == null ? '' : __t ) + '';
}

Have a look at this demo with your console open and you'll see. So your template function will be looking for an Id as either a local variable or as a key in that data object you pass it.

Your problem is that your data is empty:

render: function() {
    var data = {}; // <------------------------------- Empty
    var piledTemplate = _.template(productTemplate, data);
    this.$el.append(piledTemplate);
}

I think you want to say this:

_.template(productTemplate, this.model.toJSON())

in order to get your model's data into the template.

As the proper error says, you're trying to access a variable that wasn't defined. Check your model's data. If you're fetching from a server, make sure that the actual data get's to Backbone (use firebug or chrome dev tools).