CODEWITHSUNDEEP
javascriptbackbone.js
James_101
James_101

Reputation: 35

How can I prevent Backbones save method from trying to update every model?

I am creating a crud web app with backbone. I am writing the functionality to update a resource (PUT). I am trying to achieve this by fetching a models properties from the server (see the SubscriberView) and on successfully fetching the resource to instantiate a SubscriberEditView whereby the newly fetched model is passed. So far this works as expected; SubscriberEditView renders an html form which is populated with the model instance properties. When I enter a new login value into the form I can trigger the update function which successfully makes a PUT request to the server resource and updates the model instance as expected. However, the problem is that when I then repeat this process with another model instance the PUT request is made against the curent model AND the previously instantiated model. Is the reason for this because I now have two instances of SubscriberEditView? Or is it something else that I have missed/misunderstood.

Please see below the described code. 

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

If anyone could help then that would be greatly appreciated. Cheers

Upvotes: 0

Views: 120

Answers (1)

T J
T J

Reputation: 43156

The issue is el: '#updateSubscriber',. All your view instances are pointing to same element to which events are delegated. So clicking on any of the .save-subscriber will trigger update for all the view instances. You should not specify el for a view that is going to have more than one instance.

Upvotes: 1

Related Questions