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

然後裏面的渲染視圖，你會在模型中通過與編譯模板一起，這將填充模型中的數據。