Calling variables within Underscore template - backbone.js

Question

Im trying to make an Underscore template in my Backbone application, but my scoping must be off or something, because Underscore thinks my variable is not defined. Im getting "Uncaught ReferenceError: dictionary is not defined."
Here is the template code:
<script type="text/template" id="new_template">
<table class="table striped">
<tbody>
<% _.each(dictionary, function(user){ %>
<tr>
<td> <%= user.get('word')%></td>
<td> <%= user.get('definition')%></td>
</tr>
<% }) %>
</tbody>
</table>
</script>
And here is the logic in app.js that defines my inline template variable calls:
(function($){
//---------SINGLE ENTRY MODEL----------
var Entry = Backbone.Model.extend({
defaults: function(){
return{
word: '',
definition: ''
}
}
});
//------------ENTRY MODEL COLLECTION------------
EntryList = Backbone.Collection.extend({
model: Entry
});
//-----INSTANCIATE COLLECTION----
var dictionary = new EntryList();
var saved = new EntryList();
//-----SINGLE ENTRY VIEW------
var EntryView = Backbone.View.extend({
model: new Entry(),
tagName:'div',
className: 'singleEntry',
events:{
'click .edit': 'edit',
'click .delete': 'delete',
'keypress .definition': 'updateOnEnter',
'click .save': 'save'
},
initialize: function(){
// this.template = _.template($("#dictionary_template").html());
this.template = _.template($("#new_template").html());
},
delete: function(ev){
ev.preventDefault;
dictionary.remove(this.model);
saved.remove(this.model);
},
edit: function(ev){
ev.preventDefault;
this.$('.definition').attr('contenteditable', true).focus();
},
save: function(ev){
ev.preventDefault;
saved.add(this.model);
dictionary.remove(this.model);
saved.comparator = 'word';
console.log(this.model.toJSON());
},
close: function(){
var definition = this.$('.definition').text();
this.model.set('definition', definition);
this.$('.definition').attr('contenteditable', false).blur();
},
updateOnEnter: function(ev){
if(ev.which == 13){
this.close();
}
},
render: function(){
this.$el.html(this.template(this.model.toJSON()));
return this;
}
});
//--------------DICTIONARY VIEW------------
var DictionaryView = Backbone.View.extend({
model: dictionary,
el: $('#entries'),
initialize: function(){
this.model.on('add', this.render, this);
this.model.on('remove', this.render, this);
},
render: function(){
var self = this;
self.$el.html('');
_.each(this.model.toArray(), function(entry, i){
self.$el.append((new EntryView({model: entry})).render().$el);
});
return this;
}
});
//---------SAVED ENTRY VIEW-----------
var SavedView = Backbone.View.extend({
model: saved,
el: $('#saved'),
initialize: function(){
this.model.on('add', this.savedRender, this);
this.model.on('remove', this.savedRender, this);
},
savedRender: function(){
var self = this;
self.$el.html('');
_.each(this.model.toArray(), function(entry, i){
self.$el.append(new EntryView({model: entry}).render().$el);
});
return this;
}
});
//---------TEST VIEW------------------
var TestView = Backbone.View.extend({
el: $('#saved'),
render: function(){
this.$el.html('new event route');
}
});
//-------BINDING DATA ENTRY TO NEW MODEL VIEW-------
$(document).ready(function(){
$('#new-entry').submit(function(ev){
var entry = new Entry({word: $('#word').val(), definition: $('#definition').val() });
dictionary.add(entry);
dictionary.comparator = 'word';
console.log(dictionary.toJSON());
$('.form-group').children('input').val('');
return false;
});
var appView = new DictionaryView();
var savedView = new SavedView();
});
//--------------ROUTER----------------
var Router = Backbone.Router.extend({
routes:{
'':'home',
'new': 'newEvent'
}
});
var router = new Router();
router.on('route:home', function(){
console.log('router home');
router.on('route:newEvent', function(){
console.log('router new');
var testView = new SavedView();
})
});
Backbone.history.start();
})(jQuery);

Answer 1

Update
The way Underscore templates work (once you compile them) is by replacing any non JavaScript keywords they find in ERB-style delimiters (the bee-stings: <% %>) with the values in the object passed in to the compiled template. In your sample code, Underscore is expecting an object with a property named 'dictionary', for example.
The way your template is set up right now, it's expecting a collection (EntryList) of models with the words and definition attributes. However, if you look at your code,
render: function(){
this.$el.html(this.template(this.model.toJSON()));
return this;
}
is the only time populate your template, in your Entry view, which does not take a collection, but an Entry model.
What you really want to do is to get rid of the for each loop in your template, and let it simply render the model. I would rewrite it like this,
<script type="text/template" id="new_template">
<tr>
<td> <%= word %></td>
<td> <%= definition %></td>
</tr>
</script>
Now, I hope that el in dictionary view is a <tbody>. If it is, then these models will comfortably park their <tr> where they have to go and you can call it a day.
Looking at the defaults of the Entry model it looks like all you'll be populating that model with is { word: '', definition: '' }. In your template, underscore is looking for a variable called dictionary. Yet, you pass an object with the variables word and definition in to the template.
More importantly, I am not sure your view building logic makes compete sense. You're building child views out of EntryView in your DictionaryView and then you run a for each loop in your template?