Передача данных в подчеркивание для рендеринга не работает

Question

Я пытаюсь сделать шаблон подчеркивания, который ниже

    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
             <% } %> 

Вот мой код Backbone View

 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);
        }
    }
 });

Я просмотрел несколько учебных пособий, и я действительно запутался, поскольку у каждого из них есть свой способ добиться своей цели. Проблема, с которой я сталкиваюсь сейчас, заключается в том, что мой шаблон не отображается, поскольку он говорит, что selected не определен. Правильно ли я передаю объект на вид?

Также есть шаблон, который я могу использовать как правило для рендеринга шаблонов.

Answer 1

this.template3 (а также template1 а также template2 в этом отношении) - это функция, которую вы вызываете с данными в качестве аргумента для возврата HTML. В общем:

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

Вы просто передаете функцию шаблона в JQuery html:

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

Когда ты вручаешь html функция, она вызывает функцию, но не с аргументами, которые ожидает шаблонная функция:

.html (функция)
Тип: Функция (Целочисленный индекс, htmlString oldhtml) => htmlString

Функция, возвращающая содержимое HTML для установки. Получает позицию индекса элемента в наборе и старое значение HTML в качестве аргументов.

То, что вы делаете, это то же самое, что сказать:

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

Ты хочешь сказать:

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

так что вещи в data передается в функцию шаблона.