Question

现在，对于一些完全不同的东西。

如何在“dom”对象中委托骨干视图中的事件一个raphäel对象。这有用吗？像这样：

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对象时，我只能访问该视图而不是整个视图，因此不能访问模型。

Answer 1

另一种方法是使用新的View.setElement method手动覆盖视图构造函数/初始化程序中的this.el属性，并引用Raphael's 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获得类似的解决方案。虽然我参加派对的时间有点晚，但我想我会发布这个帖子以便它可以帮助别人！

Answer 2

如果您真的使用DOM元素，它应该可以工作。例如。如果你有一个Raphael对象圈，那么DOM元素将是 circle.node 。那个你需要在选项中作为“el”属性传递，或者确保View的this.el实际上是Raphael对象的“节点”属性。

如果您想手动绑定事件并希望能够访问事件处理程序中的视图，请使用Underscore的绑定函数：

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

其中此应指向当前上下文中的视图对象。在这种情况下，在someHandlerFunction中，这个对象就是视图。

Answer 3

请检查：https://github.com/tomasAlabes/backbone.raphael

我试图隔离这个案例进行扩展。

backbone.js＆amp; raphäel.js/ Backbone View＆lt; - ＆gt; Raphäel对象

3 个答案: