Templates 为什么model.set（..）使用backbone.js一次替换多个记录？

我有一个问题与从编辑模式保存记录有关。 场景：

• 单击编辑（第一个记录），它将在中加载选定的模型数据 编辑模式面板
• 更新文本框中的任何值
• 单击保存，它将成功保存并刷新视图
• 单击编辑（第二条记录（），它将在中加载选定的模型数据 编辑面板
• 更新文本框中的任何值
• 单击保存，它将成功保存并刷新视图 但问题是它将用第1行和第2行替换更新的模型值。我只想更新选定的行。这段代码中有什么错误

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

型号和系列

App.Models.Person = Backbone.Model.extend({
                defaults: { name: '', age: 0, occupation: '' }
            });
            App.Collections.People = Backbone.Collection.extend({
                model: App.Models.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);
                }
            });

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

添加人员

App.Models.Person = Backbone.Model.extend({
                defaults: { name: '', age: 0, occupation: '' }
            });
            App.Collections.People = Backbone.Collection.extend({
                model: App.Models.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);
                }
            });

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

编辑人物

App.Models.Person = Backbone.Model.extend({
                defaults: { name: '', age: 0, occupation: '' }
            });
            App.Collections.People = Backbone.Collection.extend({
                model: App.Models.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);
                }
            });

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

个人视图

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

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

人们的看法

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

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

默认数据

 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

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

名称
年龄
职业
人名
人龄
个人职业

列表模板

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

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

编辑模板

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

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

编辑人
人名
人龄
个人职业

---

任何人都能帮我找到问题的原因吗？任何评论和建议都将不胜感激！

当用户单击“保存”时，您没有删除您的编辑视图。我没有真正查看您的HTML，但问题似乎是您的所有编辑视图（我说全部是因为您没有删除它们，所以它们会累积）共享相同的元素。因此，当用户单击以保存时，所有编辑视图都会捕获单击事件，并因此将修改应用于他们自己的模型

---

对于解决方案，要么在编辑视图不再使用时删除它们（

this.remove（）；

将起到作用，除非您必须处理它删除元素的事实），要么使用单个编辑视图（这肯定需要您更改更多代码）.

谢谢您的评论。我按照您的建议进行了尝试，但由于第一次加载后视图不可用，无法第二次编辑任何行。您尝试了什么解决方案？第一次？您是否确保解决了元素问题（它将被删除，因此您最好让视图创建自己的元素）？再次感谢您的宝贵建议。由于我对backbone.js framework非常陌生，您有其他解决方案吗？我的投票+1@imdadhusen如果我不知道你尝试了什么，我就无法提供更多的信息：）你能编辑一下你所做的更改（只有更改，你已经发布了足够的代码：）吗