Backbone.js的集合不更新

我是新來backbone.js 我加入行動態表（HTML），但是當我打印的保存按鈕表中的數據顯示它空的數據，我的代碼如下Backbone.js的集合不更新

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

This is my form

Outupt on Save button

名稱並不顯示在輸出

來源

2013-08-30 Suraj Kharwde

當你已經擁有['this。$ el']（http://backbonejs.org/#View-$el）時不要'$（this.el）'。當你擁有這個。$（'table'）']（http://backbonejs.org/#View-dollar）時，不要'$（'table'，this.el）'。當['this.collection.each']（http://backbonejs.org/#Collection-Underscore-Methods）不要'_（this.collection.models）.each'。 –

從你發佈的內容來看，我沒有看到你在任何地方設置你的Person模型的name屬性。在您的addItem方法中，我看到您設置了srNo屬性，但根據我在此處可以看到的名稱，沒有任何操作。下面的代碼有關部分，

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

因此，你需要設置你的name屬性像你設置srNo屬性

來源

2013-08-30 13:16:55 PJR

我如何在文本字段中輸入的人物模型中設置值？請告訴我，我不知道如何設置。 –

如果你有一個文本輸入元素說'名字'。然後在你的'addItem'方法中，你可以做類似 'var nameVal = $（「＃name」）.val（）; console.log（'Name：'+ nameVal）;//只是爲了驗證你的名字是 person.set（{name：nameVal}）;' – PJR

我試過這段代碼，但它不工作，當我第一次點擊'添加列表項'按鈕$（「 #name「）。val（）獲取未定義的值。 –

我得到了這個棘手的解決方案，在事件塊的inputText中我圈套變化事件{ '點擊跨度＃spanDelete'： '刪除'，'變更輸入＃名稱'： 'textChange'} ItemView控件（在上面的例子）作爲事件，並且在textChange方法我寫以下代碼
textChange: function(e){ this.model.set('name',$(e.currentTarget).val()); }
當我打印收藏警報中的值我在inputtext中插入了所有名稱。

來源

2013-09-06 05:17:48

Backbone.js的集合不更新

回答

相關問題