javascript - Backbone 不会忘记以前的模型

Question

我正在尝试创建一个页面，我可以在其中查看我的项目列表，并在单击时编辑它们（在单独的页面上）。

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

我的观点：

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：

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