I am trying to render an underscore template which is the one below
div.col-md-12#english
select(value="", class="form-control")
option
| Select Your Language Preference
script(type="text/template" id="english-pref")
<% if (selected === "US") { %>
option(value="US", selected) | United States
<% } else %>
<% if(selected === "US"){ %>
option(value="UK", selected) | United Kingdom
<% } %>
Here is my Backbone View code
app.NotesView = Backbone.View.extend({
el: '#notes',
events: {
'click #save': 'save',
'click #update': 'update'
},
template1: _.template($('#about').html()),
template2: _.template($('#facts').html()),
template3: _.template($('#english').html()),
initialize: function() {
app.NotesModel = new app.NotesModel({});
this.model = app.NotesModel;
app.email = $('#data-user').text();
app.username = $('#data-username').text();
app.NotesModel.fetch({
data: {
email: app.email,
username: app.username
},
type: 'POST',
processData: true,
success: function(data) {
$('#save').remove();
},
complete: function(xhr, textStatus) {
//console.log(textStatus);
},
error: function() {
$('#about-container .note-editable').html('');
$('#note-container .note-editable').html('');
$('#update').remove();
}
});
this.model.bind('sync', this.render, this);
},
render: function() {
this.$('#aboutParent').html(this.template1, this);
this.$('#noteParent').html(this.template2, this);
app.initializeEditor();
$('#about-container .note-editable').html(this.model.attributes.about);
$('#note-container .note-editable').html(this.model.attributes.editorNote);
if(this.model.attributes.english === null || this.model.attributes.english === undefined || this.model.attributes.english === '') {
/*var data = '<option value="US">United States</option><option value="UK">United Kingdom</option>';*/
var data = {"selected": "US"};
this.$('#noteParent').html(this.template3,data);
}else {
var data = {"selected": "UK"};
this.$('#noteParent').html(this.template3,data);
}
}
});
I have looked at a couple of tutorials and I am really confused as each one has its own way of getting things done.The problem that I am facing now is that my template is not rendered as it says that selected is undefined. Am I passing the object properly to the view at all ?
Also is there a pattern that I can use as a rule of thumb for rendering templates.