如何在backbone.js中的模型的數組屬性中插入新數據？

Question

我是Backbone.js的起始者。我有一個模型：

模型類= TPS和模型實例名稱= tpsInfo

模型數據如下：

{ 
    "range": "", 
    "rangeid": "", 
    "maxrange": "", 
    "minrange": "", 
    "q_category_id": "1", 
    "tpsInput": [ 
    { 
     "q_id": 1, 
     "q_text": "Need support for Geographic redundancy (GR)?", 
     "data_type": "2", 
     "meta": "NULL", 
     "answer": "" // should be added here !!! 
    }, 
    { 
     "q_id": 2, 
     "q_text": "Number of Redundant sites", 
     "data_type": "1", 
     "meta": "0", 
     "answer": "" // should be added here !!! 
    } 
    ] 
} 

我在模板一種形式，當充滿應增加輸入值回答到模型。模板：

<script type=text/template id="quesTable"> 
    <% for(i=0;i<tpsInput.length;i++) { %> 
    <tr> <td><%= tpsInput[i].q_text %></td> 
    <td> 
    <% if( tpsInput[i].data_type == 0) 
    { 

    } 
    else if(tpsInput[i].data_type == 1) 
    { 
     %> 
     <input type='text' id="<%= tpsInput[i].q_id %>" class='form-control' placeholder='Enter value' > 
    <% } 
    else if(tpsInput[i].data_type == 2) 
    { 
     %> 
     <input type=checkbox id="<%= tpsInput[i].q_id %>" > 
    <% } %> 
    </td></tr> 
    <% } %> 
</script> 

如何形成的輸入值插入到答案屬性出現在model.Kindly幫助裏面tpsInput陣列..

Answer 1

爲骨幹原本並不提供直接從填充模型的能力html輸入（就像在Angular中），你應該監聽來自Backbone.View實例的輸入變化，然後在事件發生時更新代碼模型。在這裏你有一個Backbone.Model和一個模板實例，我想你也有一個Backbone.View實例。你應該看看Backbone.View屬性events（http://backbonejs.org/#View）。所以，你可以將事件輸入，比如

events: { 
    'keyup input[type="text"]': 'textAnswer', 
    'change input[type="checkbox"]': 'checkboxAnswer' 
} 

捐贈的代碼示例，我怎麼看它都在一起：

var TPS = Backbone.Model.extend({ 
    // ... 
    updateAnswer: function(questionId, answer) { 
    var tpsInput = this.get('tpsInput'); 
    for (var key in tpsInput) { 
     if (tpsInput[key].q_id == questionId) { 
     tpsInput[key].answer = answer; 
     } 
    } 
    this.set('tpsInput', tpsInput); 
    } 
    // ... 
}); 

// ... 
var tpsInfo = new TPS(); 
// ... 

var TPSView = Backbone.View.extend({ 
    // ... 
    model: tpsInfo, 
    events: { 
     'keyup input[type="text"]': 'textAnswer', 
     'change input[type="checkbox"]': 'checkboxAnswer' 
    }, 
    textAnswer: function(ev) { 
     var $el = $(ev.currentTarget); 
     var questionId = $el.attr('id'); // get question id 
     var answer = $el.val(); 
     this.model.updateAnswer(questionId, answer); 
    }, 
    checkboxAnswer: function(ev) { 
     var $el = $(ev.currentTarget); 
     var questionId = $el.attr('id'); // get question id 
     var answer = $el.is(':checked'); 
     this.model.updateAnswer(questionId, answer); 
    } 
    // ... 
});