javascript - 如何防止 Backbones 保存方法尝试更新每个模型？

Question

我正在创建一个带有主干的 CRUD Web 应用程序。我正在编写更新资源(PUT)的功能。我试图通过从服务器获取模型属性(请参阅 SubscriberView)并成功获取资源以实例化 SubscriberEditView 来实现此目的，从而传递新获取的模型。到目前为止，这符合预期； SubscriberEditView 呈现一个 html 表单，其中填充了模型实例属性。当我在表单中输入新的登录值时，我可以触发更新函数，该函数成功向服务器资源发出 PUT 请求并按预期更新模型实例。然而，问题是，当我使用另一个模型实例重复此过程时，PUT 请求是针对当前模型和先前实例化的模型发出的。这样做的原因是因为我现在有两个 SubscriberEditView 实例吗？或者是我错过/误解了其他东西。

请参阅下面描述的代码。

// The view for a single subscriber
var SubscriberView = Backbone.View.extend({
	tagName: 'tr',
	template: _.template($('#subscribers-tmpl').html()),
	initialize: function() {
		this.listenTo(this.model, 'destroy', this.remove);
	},
	render: function() {		
		var html = this.template(this.model.toJSON());
		this.$el.html(html);
		return this;
	},
    events: {
        'click .remove': 'onRemove',
        'click .edit-subscriber': 'editSubscriber',
    },
    editSubscriber: function() {  	
    	var getSubscriberModel = this.model.set('id', this.model.attributes.id, {silent:true})
    	getSubscriberModel.fetch({
    		success: function (model, response) {
    			$('#addSubscriber').fadeOut();
    			new SubscriberEditView({model:model});  			
    		},
    		error: function (response) {
    			console.log('There was an error');
    		}
    	});
    },
    onRemove: function() {
        this.model.destroy();
    }    
});

// The edit view
var SubscriberEditView = Backbone.View.extend({
	tagName: 'div',
	el: '#updateSubscriber',
	template: _.template($('#subscriberEdit-tmpl').html()),
	initialize: function() {
		this.model.on('sync', this.render, this);
	},
	events: {
		'click #close': 'cancel',
		'click .save-subscriber': 'update'
	},
	update: function() {
		var $login = this.$('#login');
		this.model.save({
			login: $login.val(),
		},
        { 
			dataType: 'text',
			success: function (model, response, options) {
				console.log('success');
     
        },
			error: function (model, response, options) {
				console.log('error');
        }
        });
	},
	cancel: function() {
		$('#addSubscriber').fadeIn();
		$('#editInner').fadeOut();
	},
	render: function() {
		var html = this.template(this.model.toJSON());
		this.$el.html(html);
	},	
});

如果有人可以提供帮助，我们将不胜感激。干杯

Answer 1

问题是el: '#updateSubscriber',。所有 View 实例都指向事件委托(delegate)给的同一元素。因此，单击任何 .save-subscriber 将触发所有 View 实例的更新。您不应为将具有多个实例的 View 指定 el。