Магистральные события, применяемые к элементу el, являющемуся элементом svg - PullRequest
Новая
       32

Магистральные события, применяемые к элементу el, являющемуся элементом svg

2 голосов
/ 13 декабря 2011

У меня есть холст 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.

1 Ответ

3 голосов
/ 16 декабря 2011

Проблема здесь в том, что вы устанавливаете элемент представления в методе рендеринга. Но магистраль пытается добавить события при инициализации. Поэтому, когда магистраль пытается добавить события, в вашем случае нет элемента. Так что либо вы должны начать свой просмотр с вашего текста SVG, либо вы добавляете события вручную в вашем методе рендеринга.

Может быть, вы можете добавить события в сам svg, и jquery достаточно умен, чтобы справиться с делегированием. Но я не уверен в этом случае.

...