svg 요소 인 el에 백본 이벤트가 적용되었습니다.

Question

클릭 수에 응답하고 싶은 텍스트가있는 SVG 캔버스가 있습니다. 아래의 코드는 작업이 이루어지고되지 않습니다

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

이

같은 다른보기의 렌더링 함수에서 호출되는 :

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

그것은 잘 나타나 나는이를 던져 for 루프의 끝에서 :

$(tagView.el).click(function() { 
    alert("xx"); 
}); 

그런 다음 딸깍 작품 그러나 나는보기와 관련된 백본 모델에 접근 할 필요가

그래서 많은 직선 JQuery와 이벤트에 백본 이벤트를 선호하는 것입니다.

Answer 1

여기서 문제는 render 메소드에서 뷰의 요소를 설정한다는 것입니다. 그러나 백본은 초기화시 이벤트를 추가하려고합니다. 따라서 백본이 이벤트를 추가하려고 할 때 아무런 요소가 없습니다. 따라서 svg 텍스트로보기를 시작하거나 render 메소드에서 직접 이벤트를 추가해야합니다.

아마도 svg 자체에 이벤트를 추가 할 수 있으며 jquery는 위임을 처리 할만큼 충분히 똑똑합니다. 하지만이 경우 확실하지 않습니다.