2011-12-12 31 views
2

我有一個SVG畫布,我想回應點擊的文字。下面的代碼是沒有得到完成任務:骨幹事件應用到一個EL,這是一個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的事件。

回答

3

這裏的問題是,你在渲染方法中設置了視圖的元素。但主幹嘗試在初始化時添加事件。所以當骨幹嘗試添加事件時,你的情況中沒有任何元素。所以要麼你必須用你的svg文本開始你的視圖,要麼你在渲染方法中手動添加事件。

也許你可以在svg本身添加事件,而jquery足夠聰明來處理委託。但我不確定在這種情況下。