передачи данных, чтобы подчеркнуть для рендеринга не работает

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

Вот мой Магистральная Посмотреть код

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

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

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

Answer 1

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

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

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

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

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

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

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

Что вы делаете то же самое, как говорят:

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

Вы хотите сказать:

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

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