Как вставить новые данные внутри атрибута массива модели в 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> 

Как вставить введенное значение формы для ответа атрибут присутствует в массиве tpsInput внутри model.Kindly помощь ..

Answer 1

Как Backbone изначально не дает возможности заселить модели непосредственно из 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); 
    } 
    // ... 
});