Question

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

请参阅下面描述的代码。

＆＃13;

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

＆＃13;

如果有人可以提供帮助，那将非常感激。干杯

Answer 1

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

如何防止Backbones save方法尝试更新每个模型？

1 个答案: