问如何将Backbone.js单击事件绑定到HTML5画布中呈现的视图？

EN

我遇到这个问题是因为我正在开发一个基于主干的框架来处理画布，所以我亲自解决了这个问题。我最终得出的答案是：忘记了在画布中使用Backbone.View。如果它不能用DOM元素表示，那么使用Backbone.View就没有意义；它的属性只是不映射到画布“元素”。

请注意，您可以使用Backbone.View来表示单个canvas DOM元素，但这不是您要描述的场景。您需要的是一个自定义视图类，它可以表示画布中的对象并处理它们的事件。

我还在使用画布上的Backbone.js开发一个纸牌游戏，并遇到了这个问题。我目前正在做的是拥有一个以CardView作为画布标记的el，以便在初始化时创建一个画布。卡片的所有绘制都是在此视图的render方法上完成的。但是，这个画布不会添加到DOM中。

然后我有一个Hand，它是一个Backbone.Collection，用来保存一组卡片。这个集合有一个Backbone.View附在游戏画布上(DOM中唯一和大的一个)。这个视图还包含一个Backbone.View的数组。然后我有：

render: function() {
    var that = this;
    this.ctx.save();
    _(this._views).each(function(view) {
        that.ctx.drawImage(view.render().el, 0, 0);
        that.ctx.translate(view.el.width, 0);
    });
    this.ctx.restore();
},

基本上，我使用上下文的drawImage将每个视图的画布绘制到游戏画布中。

我addEventListener到HandView的画布(这是它的el)来处理单击。在这个处理程序中，我检查CardView对的鼠标位置，然后操作该视图。

请注意，这只是我正在试验的东西，因为我也是Backbone.js新手。这也许是最糟糕的方法，但我只希望你能看到其中一种方法。

我确实希望我们能够在DOM中不存在的画布上检查鼠标。如果可能的话，我们可以把addEventListener转到CardView的画布上，然后让它翻译和重新渲染。HandView的画布不需要遍历它的视图。

我参加这个聚会迟到了，但我的观点和模型/收藏都不是这种逻辑的场所。

如果您正在使用fabric或其他库(我有一个使用raphael.js的应用程序)，您应该创建一个定制模块，该模块处理绘图/操作，并使用本地事件处理响应画布事件(即。https://github.com/kangax/fabric.js/wiki/Working-with-events)。

如果您需要将这些事件传递出去，您应该以编程方式公开它们，并使用主干事件将它们发布到其他主干组件中。

您不应该像上面所建议的那样将您的模型和视图紧密结合在一起。