Backbone events applied to an el that is an svg element - svg

Question

I have an SVG canvas with text that I would like to respond to clicks. The code below isn't getting the job done:
var MyView = Backbone.View.extend({
tagName : "text",
events : {
"click" : "clickhandler"
},
initialize : function() {
this.centerX = this.options.centerX;
this.centerY = this.options.centerY;
this.svg = this.options.svg;
this.tagText = this.model.get("tag_name");
this.render();
},
clickhandler : function(event) {
console.log("I was clicked!"); //This is not firing on click
},
render : function() {
this.el = this.svg.text(this.centerX, this.centerY, this.tagText, {});
return this;
}
});
This is being called in the render function of another view as such :
container.svg({
onLoad : function(svg) {
for ( var i = 1; i < that.relatedTags.length; i++) {
tagView = new MyView({
model : this.relatedTags.at(i),
centerX : 100,
centerY : 200,
svg : svg
});
}
container.append(tagView);
}
});
It shows up just fine and if I throw this in at the end of the for loop :
$(tagView.el).click(function() {
alert("xx");
});
Then the clicking works but I need to access the Backbone Model associated with the view so I'd much prefer the backbone event to a straight JQuery event.

Answer 1

The problem here is, that you set the element of the view in the render method. But backbone tries to add the events on initialization. So when backbone tries to add the events there is no element in you case. So either you have to start your view with your svg text, or you add the events by hand in your render method.
Maybe you can add the events on the svg itself and jquery is clever enough to handle the delegation. But I'm not sure in this case.