backbone.js & raphäel.js / Backbone View <-> объект Raphäel - PullRequest
Новая
       6

backbone.js & raphäel.js / Backbone View <-> объект Raphäel

11 голосов
/ 08 апреля 2011

А теперь для чего-то совершенно другого.

Как я могу делегировать события в магистральном представлении, когда объект "dom" объект Рафаэля. Это работает на всех? Как это: 

var NodeView = Backbone.View.extend({ 
                events: { 
                        "click": "click" 
                }, 
                click: function(){ 
                        alert('clicked') 
                }, 
                render: function(){ 
                        canvas.rect(this.model.get('xPos'), this.model.get('yPos'), 50, 50).attr({ 
                            fill: "#EEEEEE", 
                            stroke: "none", 
                            cursor: "move" 
                        }); 
                        return this; 
                } 

    });

Мне нужно обновить модель, когда объект raphäel изменил положение. Когда я присоединяю событие непосредственно к объекту raphäel, я имею доступ только к этому, а не ко всему виду и, следовательно, не к модели.

Ответы [ 3 ]

17 голосов
/ 27 октября 2011

Другой способ сделать это - вручную переопределить свойство this.el в конструкторе / инициализаторе представления, используя новый метод View.setElement со ссылкой на Element.node Рафаэля как это: 

var NodeView = Backbone.View.extend({ 
    initialize: function (args) {

        // create an empty reference to a Raphael rect element
        this.element = canvas.rect();

        // // overwrite the default this.el by pointing to the DOM object in
        // // Raphael. This works for older version of backbone.js
        // this.el = this.element.node;

        // in backbone 0.9.0+, you are not supposed to override the DOM object 
        // directly. rather, use the new setElement method which also takes 
        // care of the cached this.$el jquery object.
        this.setElement(this.element.node);

        // now that we have overwritten the default this.el DOM object, 
        // we need to rebind the events
        this.delegateEvents(this.events);
    },
    events: { 
        "click": "click" 
    }, 
    click: function(){ 
        alert('clicked');
    }, 
    render: function(){ 
        this.element.attr({ 
            x: this.model.get('xPos'),
            y: this.model.get('yPos'),
            width: 50,
            height: 50,
            fill: "#EEEEEE", 
            stroke: "none", 
            cursor: "move" 
        }); 
        return this; 
    } 
});

Преимущество здесь в том, что вам нужно редактировать DOM только в одном месте (в функции рендеринга), и вы все равно можете использовать превосходную обработку событий в Backbone.js. Мне удалось получить аналогичное решение для меня с Raphael 2.0. Хотя я немного опоздал на вечеринку, я подумал, что опубликую это, чтобы это могло помочь кому-то еще!

4 голосов
/ 08 апреля 2011

Должно работать, если вы действительно используете элемент DOM. Например. если у вас есть объект Рафаэля круг , то элементом DOM будет circle.node . Это то, что вам нужно передать как свойство "el" в опциях или убедиться, что это вид this.el в действительности является свойством "узла" объекта Рафаэля.

Если вы хотите связать событие вручную и хотите иметь возможность доступа к представлению в обработчике событий, используйте функцию привязки Underscore: 

$(circle.node).click(_.bind(someHandlerFunction, this));

где этот должен указывать на объект просмотра в текущем контексте. В этом случае, внутри someHandlerFunction, этот объект будет представлением.

2 голосов
/ 26 мая 2013

Проверьте это: https://github.com/tomasAlabes/backbone.raphael

Я попытался выделить это дело, сделав расширение.

...