Java Backbone.js集合未更新

我不熟悉

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

（函数（$）{
Backbone.sync=函数（方法、模型、成功、错误）{
成功（）；
}
var Person=Backbone.Model.extend({
默认值：{
srNo:1，
名称：“”
}
});
var ListPerson=Backbone.Collection.extend({
型号：人
});
var ItemView=Backbone.View.extend({
标记名：“tr”，//要创建的标记的名称
活动：{
'单击span#spanDelete'：'删除'
},
初始化：函数（）{
_.bindAll（这是“渲染”、“取消渲染”、“删除”）；
this.model.bind（'add'，this.render'）；
this.model.bind（'remove'，this.unender）；
},
render:function（）{
$（this.el）.append（“+this.model.get（'srNo'）+“[delete]”）；
归还这个；
},
unender:function（）{
$（this.el）.remove（）；
},
删除：函数（）{
this.model.destroy（）；
}
});
var ListView=Backbone.View.extend({
el:$（'body'），//将'this.el'附加到现有元素。
初始化：函数（）{
_.bindAll（这是'render'，'addItem'，'appendItem'）；
this.collection=new ListPerson（）；
this.collection.bind（'add'，this.appendItem）；
这个计数器=0；
这个。render（）；
},
活动：{
'单击按钮#btnAdd'：'添加项'，
'单击按钮#btnSave'：'保存数据'
},
render:function（）{
var self=这个；
$（this.el）.append（“添加列表项”）；
$（this.el）。追加（“”）；
$（this.el）.append（“Save”）；
_（this.collection.models）。每个（函数（人）{
自附项（人）；
}，这个）；
},
附加项：函数（）{
这个.counter++；
var person=新的person（）；
人名集({
srNo:this.counter//修改项目默认值
});
此.集合.添加（人）；
},
附录项：功能（项）{
var itemView=new itemView({
型号：项目
});
$（'table'，this.el）.append（itemView.render（）.el）；
},
saveData:function（）{
var obj=this.collection.toJSON（）；
var str_json=json.stringify（obj）；
警报（str_json）；
}
});
var listView=new listView（）；
})（jQuery）；

---

输出中未显示姓名

根据您发布的内容，我看不到您在任何地方设置个人模型的

姓名

属性。在您的

addItem

方法中，我看到您设置了

srNo

属性，但就我在这里所看到的，没有对名称进行任何操作。 下面是代码的相关部分

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

---

因此，您需要像设置

srNo

属性一样设置

name

属性我有一个棘手的解决方案，我在ItemView的事件块中将inputtext的更改事件设为事件：{'click span#spanDelete'：'remove'，'change input#name'：'textChange'，在textChange方法中，我编写了以下代码

textChange:function（e）{

this.model.set（'name'，$（e.currentTarget.val（））；

}

当我在警报中打印集合值时，我在inputtext中插入了所有名称。

如果您已经有了，请不要

$（this.el）

。当你有时间时，不要

$（'table'，this.el）

。不要<编码>\（this.collection.models）。每个都有。如何设置在文本字段中输入的个人模型值？请告诉我，我不知道如何设置。如果您有文本输入元素，请说

name

。然后在

addItem

方法中，可以执行类似

var nameVal=$（“#name”）.val（）的操作；log（'Name:'+nameVal）//只是为了验证您是否具有名称person.set（{name:nameVal}）

我尝试了此代码，但当我第一次单击“添加列表项”按钮$（“#名称”）时，它不起作用。val（）获取未定义的值。您是否在html中添加了id为

name

的

输入框

？如果您没有添加此html元素，

undefined

将是您将获得的值。是的，我有html输入标记，我也给了它id，在上面的示例中，我给了id作为'txt1'，我尝试了var nameVal=$（“#txt1”）.val（）；set（{name:nameVal}）；但它不起作用。