Javascript 将Ember.js与画布库（如Fabric.js）集成的正确方法是什么？ 我想用EMBE.JS和Fabric.js来构建一个餐厅表管理和楼层布局应用程序（如果它们能更好地支持Enter集成），我也可以考虑其他的画布框架。我已经有了一个Ember应用程序，它可以管理一个表列表（即，显示表列表的TableRoute，以及新的ans编辑子例程等），并将它们读写到JSON后端

我需要在画布上显示表格，而不是简单的项目列表。我需要结构和Ember对象之间的双向绑定，即当在画布上移动表或调整其大小时，我需要在Ember中更新对象属性，反之亦然。当在Ember中更新属性时（通过表单或从后端更新），我需要在画布上更改图形表示

有人能指出正确的建筑方向吗？如何解决这个问题

• 在哪里初始化Fabric画布元素？表路由，应用程序路由？用哪种方法
• 在哪里放置画布绘图代码？要走哪条路线？桌面控制器？哪种方法
• 我应该为画布创建视图元素吗？查看每个表的元素
• 如何解决双向绑定
• 有没有类似的示例应用程序

我非常感谢在这方面能得到的所有帮助：）

您可以在控制器中初始化Fabric canvas元素

您可以将画布绘图代码放入控制器中

注1：我在以下示例代码中使用POD结构

注2：我通过在项目中运行命令“bower install fabric--save”来安装fabric.js

模板.hbs

<div><button id="drawRect" {{action 'draw'}}>Draw Rect</button></div>
<div><canvas id="test_fabric" width="200" height="200"></canvas></div>

{{outlet}}

---

注意：不要忘记在模块中添加一个/*global fabric*/，让JSHint感到高兴

你最终弄明白了吗？我正在做一些类似的工作，可以使用一些指导。我最终为此创建了余烬组件。组件包含使用该组件时从把手模板传递的表数组。组件还包含中介类的数组。中介类是具有两个属性的Ember对象：Ember表对象和Fabric表对象。中介类还包含更新结构表对象的Ember表观察器和更新Ember表对象的结构表对象事件侦听器。通过这种方式，Ember和Fabric之间的所有通信都被很好地抽象为单独的类。Fabric表对象和中介对象是通过观察表数组中的更改在组件内部自动创建的。也许不是最好的解决方案，但我尝试尽可能多地分离Fabric ja Ember代码，并将同步内容保留在一个地方（在Mediator中）。不幸的是，我不能给出确切的代码，因为它是在保密协议。

import Ember from 'ember';
/* global fabric */
// No import for fabric, it's a global called `fabric`

function drawRect() {
  // create a wrapper around native canvas element (with id="test_fabric")
  var canvas = new fabric.Canvas("test_fabric");

  // create a rectangle object
  var rect = new fabric.Rect({
    left: 100,
    top: 100,
    fill: 'red',
    width: 20,
    height: 20
  });

  // "add" rectangle onto canvas
  canvas.add(rect);
}

export default Ember.Controller.extend({
  actions: {
    draw: function() {
      //
      drawRect();
    }
  }
});