с использованием шаблонов подчеркивания с backbone.js

Question

Я пытаюсь создать страницу с использованием backbone.js и underscore.js. Я хочу, чтобы страница имела кнопку, которая при нажатии добавляет содержимое формы к пустому тегу на странице, используя шаблон, который я определил.

Вот мой пустой тег, где я хочу шаблон вещи, чтобы идти после того, как нажата кнопка:

<div id="playView"></div> 
<input type="button" id="addQuestion" value="Add Question" /> 

Вот мой шаблон, где данные формы должны идти:

<script id="viewTemplate" type="text/template"> 
    <div id="stemView">{{ Stem }}</div> 
    <label for="answer1"> a)</label><div>{{ answer1View }}</div> 
    <label for="answer2"> b)</label><div>{{ answer2View }}</div> 
    <label for="answer3"> c)</label><div>{{ answer3View }}</div> 
    <label for="answer4"> d)</label><div>{{ answer4View }}</div> 
</script> 

А вот форма что пользователь заполнит:

<form> 
    <textarea id="stem"><textarea> 
    <textarea id="answer1"></textarea> 
    <textarea id="answer2"></textarea> 
    <textarea id="answer3"></textarea> 
    <textarea id="answer4"></textarea> 
</form> 

И вот соответствующий код backbone.js. Мой вопрос: что мне делать в случае? Как мне получить данные из формы, затем в viewTemplate, а затем в пустой тег div (playView)?

wizard.PlayView = Backbone.View.extend({ 
    initialize: function() { 
     this.model.bind('change', _.bind(this.render, this)); 
    }, 
    el: '#playView', 

    events: { 
     'click button#addQuestion': 'addQuestion' 
    } 
    addQuestion: function() { 
     $(this.el).append(); 
    } 
}); 

Answer 1

Если я правильно понять вас, как вы имеете эту установку сейчас, вы не будете в состоянии вызвать

events: { 
     'click button#addQuestion': 'addQuestion' 
    } 

потому что входной тег должен быть в шаблоне позвоночника. Поэтому, чтобы исправить эту проблему, шаблон черной кости отобразит кнопку на странице, затем прослушайте щелчок по кнопке. При нажатии на кнопку, вы будете загружать шаблон вопроса (который встроен в страницу HTML и вставить, что в текущий шаблон позвоночника.

<script id="viewTemplate" type="text/template"> 
    <div id="stemView">{{ Stem }}</div> 
    <label for="answer1"> a)</label><div>{{ answer1View }}</div> 
    <label for="answer2"> b)</label><div>{{ answer2View }}</div> 
    <label for="answer3"> c)</label><div>{{ answer3View }}</div> 
    <label for="answer4"> d)</label><div>{{ answer4View }}</div> 
</script> 

<script id="mainTemplate" type="text/template"> 
    <input type="button" id="addQuestion" value="Add Question" /> 
</script> 


wizard.PlayView = Backbone.View.extend({ 
    initialize: function() { 
     this.model.bind('change', _.bind(this.render, this)); 
    }, 

el: '#playView', 

template : _.template($('#mainTemplate').html()) 

events: { 
    'click button#addQuestion': 'addQuestion' 
} 

addQuestion: function() { 
    var t = _.template($('#stemTemplate').html(); 
    $(this.el).append(t(this.model.toJSON())); 
} 

render: function() { 
      $(this.el).append(this.template(this.model.toJSON())); 
     } 

}); 

Answer 2

Сначала вы построили модель, содержащую данные.

Тогда внутри вида, вы бы компилировать шаблон первого

Используйте _.template компилировать шаблон

wizard.PlayView = Backbone.View.extend({ 
     template : _.template($('#viewTemplate').html()) 
     initialize: function() { 
     // Use listenTo to bind events instead of directly 
     // listening on the model 
      this.listenTo(this.model, 'change', this.render); 
     }, 
     events: { 
      'click .addQuestion': 'addQuestion' 
     }, 
     addQuestion: function(e) { 
      var $target = $(e.target); 
      // Your logic here 
     }, 
     render: function() { 
      $(this.el).append(this.template(this.model.toJSON())); 
     } 

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