html - Backbone.js: Why does the event being fired multiple times -
i new in backbone.
i trying have event on view object. when add event alert box message, event being called multiple times.
this code written:
var photo = backbone.model.extend({ initialize : function () { imageurl = 'no url', data = ""; width = 0, height = 0 }, close: function () { this.destroy(); this.view.remove(); } }); var photocollection = backbone.collection.extend({ model : photo, url : '/photos' }); var photoview = backbone.view.extend({ model: photo, el: 'body', initialize: function () { }, events : { 'click img':'imageclicked' }, imageclicked : function () { alert("asdf"); }, resize: function (d, width, height) { var image = new image(); image.src = d; $(image).prop('src', d); $(image).prop('width', width + 'px'); $(image).prop('height', height + 'px'); $(this.el).append('<img src="'+d+'" style="float:left; width:'+width+'px; height:'+height+'px" />'); return this; }})
;
the code use create view instance here
return collection.each(function (photo) { var pview = new photoview({ el: 'body' }); pview.resize( photo.get('data'), parseint(width /summedratio * photo.get('aspectratio')), parseint(width/summedratio)); });
since calling constructor/initializing photoview every time, multiple events getting fired.
avoid initializing in each loop.
var pview = new photoview({ el: 'body' });
updated anwser
var photoview = backbone.view.extend({ model: photo, el: 'img', initialize: function () { }, events : { 'click img':'imageclicked' }, imageclicked : function () { alert("asdf"); }, resize: function (d, width, height) { var $image = this.$(el); $image.attr('src', d); $image.attr('width', width + 'px'); $image.attr('height', height + 'px'); $('body').append('<img src="'+d+'" style="float:left; width:'+width+'px; height:'+height+'px" />'); return this; }});
Comments
Post a Comment