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());
}
當我在警報中打印收集值時，我在輸入文本中插入了所有名稱。