Question

我想使用Ember.js和Fabric.js构建餐厅表管理和楼层布局应用程序（如果它们为Ember集成提供更好的支持，我还准备考虑其他画布框架）。我已经有一个Ember应用程序可以管理一个表列表（即TablesRoute以显示表列表，使用New ans Edit子路由等）并读取并将它们写入JSON后端。

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

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

在哪里初始化Fabric画布元素？ TablesRoute，应用路线？在哪种方法？
哪里放画布绘图代码？到TablesRoute？ TableController？哪种方法？
我应该为画布创建View元素吗？查看每个表的元素？
如何解决双向绑定？
那里有任何类似的示例应用程序吗？

我感谢我能得到的所有帮助：）

Answer 1

您可以在控制器中初始化Fabric画布元素。
您可以将画布绘图代码放在控制器中。

注1：我在以下示例代码中使用POD结构。 https://www.ludu.co/course/ember

注意2：我通过运行命令＆＃39; bower install fabric --save＆＃39;安装fabric.js。在我的项目中。

template.hbs

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

{{outlet}}

controller.js

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();
    }
  }
});

注意：不要忘记通过向模块添加/ *全局结构* /来使JSHint满意。 http://ember-cli.com/user-guide/#managing-dependencies

将Ember.js与像Fabric.js这样的画布库集成的正确方法是什么？

1 个答案: