Backbone.js Collection ne mise à jour

Question

Je suis nouveau à backbone.js Je suis d'ajouter des lignes dynamiques dans le tableau (HTML), mais quand j'imprimer des données de table sur le bouton enregistrer l'affichage des données vides, mon code est comme suit

(function($){ 

Backbone.sync = function(method, model, success, error){ 
    success(); 
} 

var Person = Backbone.Model.extend({ 
    defaults: { 
     srNo:1, 
     name: '' 
    } 
}); 

var ListPerson = Backbone.Collection.extend({ 
    model: Person 
}); 


var ItemView = Backbone.View.extend({ 
    tagName: 'tr', // name of tag to be created 

    events: { 

     'click span#spanDelete': 'remove' 
    }, 
    initialize: function(){ 
     _.bindAll(this, 'render', 'unrender', 'remove'); 

     this.model.bind('add', this.render); 
     this.model.bind('remove', this.unrender); 
    }, 
    render: function(){ 
     $(this.el).append("<td>"+this.model.get('srNo')+"</td><td><input type='text' id='txt1' value="+this.model.get('name')+"></td><td><span class='delete' id='spanDelete' style='cursor:pointer; color:red; font-family:sans-serif;'>[delete]</span></td>"); 
     return this; 
    }, 
    unrender: function(){ 
     $(this.el).remove(); 
    }, 
    remove: function(){ 
     this.model.destroy(); 
    } 
}); 

var ListView = Backbone.View.extend({ 
    el: $('body'), // attaches `this.el` to an existing element. 
    initialize: function(){ 
     _.bindAll(this, 'render', 'addItem', 'appendItem'); 

     this.collection = new ListPerson(); 
     this.collection.bind('add', this.appendItem); 

     this.counter = 0; 
     this.render(); 
    }, 
    events: { 
     'click button#btnAdd': 'addItem', 
     'click button#btnSave': 'saveData' 
    }, 
    render: function(){ 
     var self = this; 
     $(this.el).append("<button id='btnAdd'>Add list item</button>"); 
     $(this.el).append("<table border=1 id='dtl1'></table>"); 
     $(this.el).append("<button id='btnSave'>Save</button>"); 
     _(this.collection.models).each(function(person){ 
      self.appendItem(person); 
     }, this); 
    }, 
    addItem: function(){ 
     this.counter++; 
     var person = new Person(); 
     person.set({ 
      srNo: this.counter // modify item defaults 
     }); 
     this.collection.add(person); 
    }, 
    appendItem: function(item){ 
     var itemView = new ItemView({ 
      model: item 
     }); 
     $('table', this.el).append(itemView.render().el); 
    }, 
    saveData: function(){ 
     var obj=this.collection.toJSON(); 
      var str_json = JSON.stringify(obj); 
      alert(str_json); 
    } 
}); 
var listView = new ListView(); 
})(jQuery); 

Nom est pas affiché en sortie

Answer 1

De ce que vous avez posté, je ne vous vois pas définir l'attribut name de votre modèle Personne n'importe où. Dans votre méthode addItem, je vois que vous définissez l'attribut srNo mais rien n'est fait pour le nom aussi loin que je peux voir ici. partie pertinente de votre code ci-dessous,

var person = new Person(); 
person.set({ 
    srNo: this.counter // modify item defaults 
}); 

Vous aurez besoin de définir votre name attribut comme vous définissez l'attribut srNo

Answer 2

Je suis une solution délicate pour cela, je événement de changement de piège de inputtext dans le bloc d'événements de ItemView (dans l'exemple ci-dessus) comme des événements: {clic durée # spanDelete ': 'supprimer', 'entrée de changement # nom': 'textChange'}, et dans la méthode textChange i écrire le code suivant
textChange: function(e){
this.model.set('name',$(e.currentTarget).val());
}
Lorsque je imprime la collection valeur en alerte j'ai eu tous les noms insérés dans inputtext.