2

クリックに応答したいテキストを含む 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;
}
});

これは、別のビューの render 関数で呼び出されています。

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 イベントよりもバックボーン イベントを優先します。

4

1 に答える 1

3

ここでの問題は、render メソッドでビューの要素を設定することです。しかし、バックボーンは初期化時にイベントを追加しようとします。したがって、バックボーンがイベントを追加しようとすると、要素はありません。そのため、svg テキストでビューを開始するか、render メソッドで手動でイベントを追加する必要があります。

たぶん、svg 自体にイベントを追加することができ、jquery は委任を処理するのに十分賢いです。しかし、この場合はよくわかりません。

于 2011-12-16T19:50:27.610 に答える