Passing data to underscore for rendering not working

Question

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.

Answer 1

this.template3 (and template1 and template2 for that matter) is a function which you call with the data as an argument to get the HTML back. In general:

var tmpl = _.template(template_source_text);
var html = tmpl(template_data);

You're just passing the template function to jQuery's html:

this.$('#noteParent').html(this.template3,data);

When you hand html a function, it calls the function but not with the arguments a template function expects:

.html( function )
Type: Function( Integer index, htmlString oldhtml ) => htmlString

A function returning the HTML content to set. Receives the index position of the element in the set and the old HTML value as arguments.

What you're doing is the same as saying:

this.$('#noteParent').html(this.template3(some_index, some_html));

You want to say:

this.$('#noteParent').html(this.template3(data));

so that the stuff in data is passed to the template function.