Как правильно интегрировать Ember.js с библиотекой холста, такой как Fabric.js?

Я хочу создать приложение для управления столиками в ресторане и планировки этажей с использованием Ember.js и Fabric.js (я готов также рассмотреть другие фреймворки Canvas, если они обеспечивают лучшую поддержку интеграции с Ember). У меня уже есть приложение Ember, которое может управлять списком таблиц (например, TablesRoute для отображения списка таблиц, с подмаршрутами New и Edit и т. д.), а также читать и записывать их в бэкэнд JSON.

Мне нужно отображать таблицы на холсте вместо простого списка элементов. Мне нужна двусторонняя привязка между объектами Fabric и Ember, т.е. когда таблица перемещается или изменяется размер на холсте, мне нужно, чтобы атрибуты объекта обновлялись в Ember, и наоборот, когда атрибуты обновляются в Ember (по форме или обновлению из бэкэнда), тогда я нужно графическое представление изменить на холсте.

Может ли кто-нибудь указать правильное архитектурное направление, как это решить?

  • Где инициализировать элемент холста Fabric? TablesRoute, маршрут приложения? В каком методе?
  • Куда поместить код рисования холста? В TablesRoute? Контроллер таблиц? Какой метод?
  • Должен ли я создавать элементы View для холста? Просмотр элементов для каждой таблицы?
  • Как решить двустороннюю привязку?
  • Любые подобные примеры приложений там?

Я ценю всю помощь, которую я могу получить в этом :)


javascript ember.js fabricjs
person jaaksarv    schedule 02.08.2013    source источник
comment
ты в итоге понял это? Я работаю над чем-то подобным и могу использовать некоторые рекомендации.   -  person Poyi    schedule 24.11.2013
comment
В итоге я создал компонент Ember для этого. Компонент содержит массив таблиц, которые передаются из шаблона Handlebars при использовании компонента. Компонент также содержит массив классов-посредников. Классы-посредники — это объекты Ember, которые имеют два свойства: объект Ember Table и объект Fabric Table. Класс Mediator также содержит наблюдатели Ember Table, которые обновляют объект Fabric Table, и прослушиватели событий объекта Fabric Table, которые обновляют объект Ember Table. Таким образом, вся связь между Ember и Fabric прекрасно абстрагируется в отдельный класс.   -  person jaaksarv    schedule 06.12.2013
comment
Объекты Fabric Table и объекты Mediator автоматически создаются внутри компонента, наблюдая за изменениями в массиве таблиц. Возможно, это не лучшее решение, но я постарался максимально разделить код Fabric и Ember и хранить синхронизацию в одном месте (в Медиаторе). К сожалению, точный код дать не могу, так как он находится под NDA.   -  person jaaksarv    schedule 06.12.2013

Ответы (1)


arrow_upward
0
arrow_downward

  1. Вы можете инициализировать элемент холста Fabric в контроллере.
  2. Вы можете поместить код рисования холста в контроллер.

Примечание 1. Я использую структуру POD в следующих примерах кода. https://www.ludu.co/course/ember

Примечание 2. Я устанавливаю fabric.js с помощью команды запуска «bower install fabric --save» в своем проекте.

шаблон.hbs

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

{{outlet}}

контроллер.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

person Calvin    schedule 06.02.2016