Backbone.js集合未更新

Question

我刚好接触过backbone.js ，正在表（HTML）中添加动态行，但是当我在保存按钮上打印表数据时，它显示空数据，我的代码如下

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

名称未显示在输出中

Answer 1

从您发布的内容来看，我看不到您在任何地方设置Person模型的name属性。 在您的addItem方法中，我看到您设置了srNo属性，但据我所知，对该名称没有做任何事情。 下面是您代码的相关部分，

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

因此，你需要设置你的name属性像你设置srNo属性

Answer 2

我对此有一个棘手的解决方案，我将Inputtext的change事件捕获在ItemView的事件块中（在上面的示例中）作为事件：{'click span＃spanDelete'：'remove'， 'change input＃name'：'textChange' } ，并在textChange方法中编写以下代码
textChange: function(e){
this.model.set('name',$(e.currentTarget).val());
}
当我在警报中打印收集值时，我在输入文本中插入了所有名称。