为什么model.set（..）使用backbone.js一次替换多个记录？ [英] Why model.set(..) replace multiple records at a time using backbone.js?
本文介绍了为什么model.set（..）使用backbone.js一次替换多个记录？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我遇到一个与从编辑模式保存记录有关的问题。场景：
1.点击编辑（第一条记录），它将在编辑模式面板中加载选定的模型数据。
2.更新文本框中的任何值
3.点击保存，它将成功保存并刷新视图。
4.点击编辑（第二条记录（它将在编辑面板中加载选定的模型数据。
5.更新文本框中的任何值
单击保存，它将成功保存并刷新视图但问题是它将用Row1和Row2替换更新的模型值。我想更新只有选中的行。这段代码出了什么问题。
I have one problem which is related to saving records from edit mode. Scenario:
1. Click on edit (first records), it will load selected model data in edit mode panel.
2. Update any value in textbox
3. Click on save, it will save successfully and refresh view.
4. Click on edit (second records(, it will load selected model data in edit panel.
5. Update any value in textbox
Click on save, it will save successfully and refresh view But the problem is It will replace updated model value with Row1 and Row2. I would like to update only selected row. What was wrong in this code.
window.App = { Models: {}, Collections: {}, Views: {}, Helper: {} }
App.Helper.getFormsValue = function (form) {
var newName = form.find('.name').val();
var newAge = form.find('.age').val();
var newOccupation = form.find('.occupation').val();
return { name: newName, age: newAge, occupation: newOccupation };
}
型号和收藏品
Model and Collection
App.Models.Person = Backbone.Model.extend({
defaults: { name: '', age: 0, occupation: '' }
});
App.Collections.People = Backbone.Collection.extend({
model: App.Models.Person
});
添加人物
Add Person
App.Views.AddPerson = Backbone.View.extend({
el: '#addPersonWrapper',
events: {
'click .add': 'addPersonForm',
'click .save': 'addPerson'
},
addPersonForm: function (e) {
$(e.target).hide();
this.$el.find('.addPerson').show();
},
addPerson: function () {
var form = this.$el;
form.find('.addPerson').hide();
form.find('.add').show();
var person = new App.Models.Person(App.Helper.getFormsValue(form));
this.collection.add(person);
}
});
编辑人物
Edit Person
App.Views.EditPerson = Backbone.View.extend({
el: '.editPersonWrapper',
template: template.get('editTemplate'),
initialize: function () {
this.$el.show();
this.rentder();
},
events: {
'click .save': 'savePerson'
},
rentder: function () {
this.$el.html(this.template(this.model.toJSON()));
},
savePerson: function () {
console.log(this.model.toJSON());
var form = this.$el;
this.model.set(App.Helper.getFormsValue(form));
this.$el.hide();
}
});
人物查看
Person View
App.Views.Person = Backbone.View.extend({
tagName: 'tr',
template: template.get('listTemplate'),
initialize: function () {
this.model.on("change", this.render, this);
this.model.on('destroy', this.remove, this);
this.on("edit", function (view) {
var editperson = new App.Views.EditPerson({ model: view.model });
}.bind(this));
},
events: {
'click .edit': 'editPerson',
'click .delete': 'deletePerson'
},
render: function () {
this.$el.html(this.template(this.model.toJSON()));
return this;
},
editPerson: function () {
this.trigger("edit", this);
},
deletePerson: function (e) {
this.model.destroy();
},
remove: function () {
this.$el.remove();
}
});
人物查看
People View
App.Views.People = Backbone.View.extend({
el: '#personList',
initialize: function () {
this.collection.on("add", this.addPerson, this);
this.render();
},
render: function () {
this.collection.each(this.addPerson, this);
},
addPerson: function (person) {
var personView = new App.Views.Person({ model: person });
this.$el.append(personView.render().el);
}
});
默认数据
Default Data
var peopleCollection = new App.Collections.People([
{ name: 'Imdadhusen', age: 31, occupation: 'M.C.A.' },
{ name: 'Manindar', age: 27, occupation: 'B.E.I.T.' },
{ name: 'Kuber', age: 32, occupation: 'M.S.C.I.T.' },
{ name: 'Rashidali', age: 5, occupation: 'S.K.G' }]);
var addPerson = new App.Views.AddPerson({ collection: peopleCollection });
var peopleView = new App.Views.People({ collection: peopleCollection });
HTML
HTML
<table border="0">
<thead>
<tr>
<th style="width: 180px">Name</th>
<th style="width: 50px">Age</th>
<th style="width: 120px">Occupation</th>
<th style="width: 50px"></th>
<th style="width: 50px"></th>
</tr>
</thead>
<tbody id="personList">
</tbody>
</table>
<div id="addPersonWrapper">
<div class="formRow">
<div class="left">
<input class="add" type="button" value="Add Person" />
</div>
<div class="clearall"></div>
</div>
<div class="addPerson">
<div class="formRow">
<div class="left">Person Name</div>
<div class="right">
<input class="name" type="text" placeholder="Name of the person" />
</div>
<div class="clearall"></div>
</div>
<div class="formRow">
<div class="left">Person Age</div>
<div class="right">
<input class="age" type="text" placeholder="Age of the person" />
</div>
<div class="clearall"></div>
</div>
<div class="formRow">
<div class="left">Person Occupation</div>
<div class="right">
<input class="occupation" type="text" placeholder="Occupation of the person" />
</div>
<div class="clearall"></div>
</div>
<div class="formRow">
<div class="left">
<input class="save" type="button" value="Save Person" />
</div>
<div class="clearall"></div>
</div>
</div>
</div>
<div class="editPersonWrapper">
</div>
列表模板
List Template
<script id="listTemplate" type="text/template">
<td><%= name %></td>
<td><%= age %></td>
<td><%= occupation %></td>
<td style="text-align:center"><a class="edit" href="#">Edit</a></td>
<td style="text-align:center"><a class="delete" href="#">Delete</a></td>
</script> < br $>
编辑模板
Edit Template
<script id="editTemplate" type="text/template">
<h3>Edit Person</h3>
<div class="formRow">
<div class="left">Person Name</div>
<div class="right">
<input class="name" type="text" placeholder="Name of the person" value="<%= name %>" />
</div>
<div class="clearall"></div>
</div>
<div class="formRow">
<div class="left">Person Age</div>
<div class="right">
<input class="age" type="text" placeholder="Age of the person" value="<%= age %>"/>
</div>
<div class="clearall"></div>
</div>
<div class="formRow">
<div class="left">Person Occupation</div>
<div class="right">
<input class="occupation" type="text" placeholder="Occupation of the person" value="<%= occupation %>"/>
</div>
<div class="clearall"></div>
</div>
<div class="formRow">
<div class="left">
<input class="save" type="button" value="Save Person" />
</div>
<div class="clearall"></div>
</div>
</script>
Can any body help me to finding the cause of the problem. Any comment and suggestions would be highly appreciated!
Can any body help me to finding the cause of the problem. Any comment and suggestions would be highly appreciated!
推荐答案
(e.target).hide();
this.
(e.target).hide(); this.
el.find('.addPerson').show();
},
addPerson: function () {
var form = this.
el.find('.addPerson').show(); }, addPerson: function () { var form = this.
el;
form.find('.addPerson').hide();
form.find('.add').show();
var person = new App.Models.Person(App.Helper.getFormsValue(form));
this.collection.add(person);
}
});
el; form.find('.addPerson').hide(); form.find('.add').show(); var person = new App.Models.Person(App.Helper.getFormsValue(form)); this.collection.add(person); } });
Edit Person
Edit Person
App.Views.EditPerson = Backbone.View.extend({
el: '.editPersonWrapper',
template: template.get('editTemplate'),
initialize: function () {
this.这篇关于为什么model.set（..）使用backbone.js一次替换多个记录？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
