我是 Ember 新手，目前正在尝试使用 Ember 编写基于画布的游戏。该游戏的刷新率极低（它本质上是回合制的，因此无需获得巨大的 FPS）。
每个模型都有大量的视图侧渲染（用于计算轨迹等），我真的很喜欢 Ember 数据模型和用法。
我目前的工作方式是，对于集合中的每个模型对象，我在视图中调用方法“draw”，并将画布上下文作为参数传递。然后它在画布上相对于中心点的适当位置绘制自己。
我现在正在向它添加点击事件，并且我正在考虑在您点击一个对象时出现一个模态对话。问题是，这个代码在哪里？我目前在模型中添加了它，但是（特别是因为我无法访问路由器），它真的不属于那里。同样，我的模型目前过于混乱，我不喜欢渲染代码。
点击事件（在画布坐标上）和画布绘图代码应该去哪里？我认为理想情况下，我应该使用装饰器模式，但我不确定如何将其融入 Ember 框架。
编辑：代码示例：这是主视图，最初加载画布：
Space.CanvasView = Ember.View.extend({
tagName: 'canvas',
didInsertElement: function(){
this._super();
var context = this.draw();
this.get('controller').send('draw', context)
},
draw: function(){
canvas = this.get('element');
context = canvas.getContext('2d');
var w = $(window).width();
var h = $(window).height();
canvas.width = w;
canvas.height = h;
context.fillRect (0, 0, w,h);
context.centerX = w/2;
context.centerY = h/2;
return context;
}
});
然后，在主父视图中：
Space.System = DS.Model.extend({
name: DS.attr('string'),
//attributes and various other model methods that do some maths
draw: function(context){
var drawRadius = this.get('radius');
// 30 lines of drawing on the canvas
context.fill();
this.get('orbitals').forEach(function(orbital){
orbital.draw(context);
})
},
setContext: function(context){
var sys = this
this.get('orbitals').then(function(){
sys.clickHandlers(context);
sys.draw(context);
})
window.onresize = function(e){sys.draw(context)};
},
clickHandlers: function(context){
system = this;
context.canvas.addEventListener('click', function(ev){
system.get('orbitals').map(function(orbital){
if(orbital.withinOrbital(context, ev.clientX - context.canvas.offsetLeft, ev.clientY - context.canvas.offsetTop)){
console.log(orbital);
}
})
}, false)
}
类似地，每个 Orbital 然后实现它自己的 draw 方法，将上下文作为参数将其绘制到画布上。