Backbonejs: triggering events when inserting svg

Question

Why does this not work?.........

SpiderView = Backbone.View.extend({
el: $('#mobidim'),
events: {
  'click path': 'focusItem'
},
initialize: function(){
    this.render();
},
render: function(){
    $(this.el).html('<embed src="img/mobile-dimensions.svg" type="image/svg+xml" />');
},
focusItem: function(event ) {
    console.log("yeeeeeeeeee");
}
});

   var spider = new Spider;
   var spiderView = new SpiderView();

-> Goal in the end is, that I can trigger events from items within the SVG graphic and then do some manipulation on the graphic (simple like hiding and showing nodes within the SVG)

I don't think you can bind events to svg elements inside an tag directly like this. You can try to embed an inline svg directly within a — Yurui Zhang, Nov 21 '13 at 14:56
thanks for the answer, but it's a pretty huge xml, how would I do this then in my context? — rapsli, Nov 21 '13 at 14:58
Please see the link I added above and see if that works. I don't think you can delegate events into embed/object/iframe since they are treated as a different DOM. But you can grab the dom and bind events on it. Or you can try to use the svg xml as your template for this view (i think this is an easier solution). — Yurui Zhang, Nov 21 '13 at 15:07

score 0 · Answer 1 · answered Nov 21 '13 at 19:05

Just to answer this question:

In my HTML I added:

 `<script type="text/template" id="svg_template">
                  <svg
           xmlns:dc="http://purl.org/dc/elements/1.1/"
           xmlns:cc="http://creativecommons.org/ns#"
           xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
           xmlns:svg="http://www.w3.org/2000/svg"
           xmlns="http://www.w3.org/2000/svg"
           xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
           xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
           width="1052.3622"
  ...
  ...
  </script>
`

And I then changed my view to this:

SpiderView = Backbone.View.extend({
el: $('#mobidim'),
events: {
  'click path': 'focusItem'
},
initialize: function(){
    this.render();
},
render: function(){
    // Compile the template using underscore
    var template = _.template( $("#search_template").html(), {} );
    // Load the compiled HTML into the Backbone "el"
    this.$el.html( template );
},
focusItem: function(event ) {
    console.log("yeeeeeeeeee");
}
});

Now I can add my click events.

Backbonejs: triggering events when inserting svg

1 Answers1