Javascript 主干不'；别忘了以前的型号

我试图创建一个页面，在这里我可以看到我的项目列表，并在单击时编辑它们（在单独的页面上）

但当我浏览不同的项目（模型），然后尝试编辑一个项目时，我加载的其他项目也会编辑

我的看法是：

App.Views.Items.Types.Type = Backbone.View.extend({

template: '#template_itemtypeview',
el: '#content',

initialize: function() {
    $('.manage_items_header').show();
    this.render();
},

render: function() {
    var self = this;
    var itemtypes = new App.Collections.ItemTypes();
    itemtypes.fetch({
        success: function() {
            var template = _.template($(self.template).html());
            $(self.el).html(template({
                model: self.model.toJSON(),
                itemtypes: itemtypes.models
            }));
        }
    });

    return this;
},

events: {
    "change": "change",
    "click .save": "save",
    "click .delete": "delete",
},

change: function(event) {
    // Remove any existing alert message
    App.Utils.hideAlert();

    // Apply the change to the model
    var target = event.target;
    var change = {};

    if (target.type == 'checkbox') {
        change[target.name] = target.checked;
    } else {
        change[target.name] = target.value;
    }
    this.model.set(change);
},

save: function() {
    var self = this;
    this.model.save(null, {
        success: function(model) {
            self.render();
            App.app.navigate('items/types/' + model.id, false);
            App.Utils.showAlert('Success!', 'Item type saved successfully', 'alert-success');
        },
        error: function() {
            App.Utils.showAlert('Error', 'An error occurred while trying to delete this item type', 'alert-error');
        }
    });

},

delete: function() {
    var self = this;
    this.model.destroy({
        success: function() {
            App.app.navigate('items/types/new', true);

            alert('Item type deleted successfully');
            //window.history.back();
        }
    });
    return false;
} });

路线的相关部分：

   itemTypeAdd: function(){
    App.Views.HeaderView.selectMenuItem('manage_items');
    new App.Views.Items.Types.Type({
        model: new App.Models.ItemType()
    });
},
itemTypeShow: function(id){
    App.Views.HeaderView.selectMenuItem('manage_items');
    var itemtype = new App.Models.ItemType({id: id});
    itemtype.fetch({success: function(){
        new App.Views.Items.Types.Type({
            model: itemtype
        });
    }});
},

HTML:

项目类型详细信息


身份证件：
姓名：
有地方吗
项目类型

---

我猜你在某处看到了僵尸的景象。您可能有多个视图（每个视图都有不同的模型）绑定到

#content

，但您永远不会将它们杀死，结果就是僵尸。您可以将

console.log（this.cid）

添加到视图的一个事件处理程序中，以查看您绑定了多少个视图。我可以做些什么来防止这种情况发生？调用

remove

删除您实例化的所有视图，不要使用

el:'#id'

，实例化视图的东西应该将其放入容器中，将视图附加到现有图元可能充满危险，因此在您知道什么条件使其安全之前，应避免将视图附加到现有图元。

<form class="form-horizontal span5">


    <fieldset>

        <legend>Item Type Details</legend>
        <br/>

                <div class="control-group">
                    <label for="collectionID" class="control-label">ID:</label>

                    <div class="controls">
                        <input id="collectionID" name="id" type="text" value="<%= model.id === null ? '' : model.id %>" class="span3"
                               disabled/>
                    </div>
                </div>

                <div class="control-group">
                    <label for="name" class="control-label">Name:</label>

                    <div class="controls">
                        <input type="text" id="name" name="name" value="<%= model.name %>"/>
                        <span class="help-inline"></span>
                    </div>
                </div>
                <div class="control-group">
                    <label for="name" class="control-label">Has places?:</label>

                    <div class="controls">
                        <input type="checkbox" name="has_place"<% if(model.has_place) { %> checked="checked"<% } %>>
                        <span class="help-inline"></span>
                    </div>
                </div>
    </fieldset>

    <div class="form-actions">
        <a href="#" class="btn btn-primary save">Save</a>
        <a href="#" class="btn delete">Delete</a>
    </div>

</form>

<div class="span2">
    <legend>Item Types <a href="#items/types/new" class="btn btn-small">+ New</a></legend>
    <ul id="itemtypes_list">
        <%
            _.each(itemtypes,function(item,key,list){
        %>
                <li><a href="#items/types/<%= item.attributes.id %>"><%= item.attributes.name %></a></li>

        <%
            });
        %>
    </ul>
</div>