Как связать событие нажатия Backbone.js с представлением, отображаемым внутри холста HTML5?

Question

Я только начинаю с Backbone.js , но это выглядит действительно интересно ...

Прямо сейчас я переделываю предыдущий проект, который рисует различные объекты (2-3 разных типа модели) в одном холсте HTML5.

Каждый объект кликабелен. Для холста существует обработчик событий, который получает местоположение щелчка (локальное для объекта холста), а затем ищет объекты, которые могут вызвать попадание.

Есть ли какой-либо конкретный способ или наилучшая практика, которую я должен использовать при выполнении этого для события click в представлении Backbone.js?

Спасибо!

Обновление: найдено fabric.js , которое, кажется, обрабатывает идею объектов в элементе canvas, но не предоставляет рамки стиля MVC как backbone.js.

Также я посмотрел на knockout.js . Кажется, он еще более привязан к элементам HTML (не к холсту), чем к backbone.js.

Answer 1

Я сталкивался с этим вопросом, потому что я работаю над Backbone-фреймворком для работы с canvas, поэтому я сам с этим справился. В конце концов я пришел к ответу: Забудьте об использовании Backbone.View с canvas. Если он не может быть представлен элементом DOM, то для него нет смысла использовать Backbone.View; его свойства просто не отображаются на элементах canvas.

Вы можете использовать Backbone.View для представления одного canvas элемента DOM, замечательно, но это не тот сценарий, который вы описываете. Вам нужен пользовательский класс представления, который может представлять ваши объекты в холсте и обрабатывать их события.

Answer 2

Я также работаю над карточной игрой, использующей Backbone.js на Canvas, и натолкнулся на этот вопрос. То, что я сейчас делаю, это 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.

I addEventListener на HandView холст (который является его el) для обработки клика. В этом обработчике я проверяю положение мыши относительно CardView, а затем манипулирую этим видом.

Имейте в виду, я просто экспериментирую с этим, так как я тоже новичок в Backbone.js. Это может быть худший способ сделать, но я просто надеюсь, что вы можете увидеть один из способов сделать это.

Хотелось бы, чтобы мы могли проверить мышь по холсту, которого нет в DOM. Если это возможно, мы могли бы просто addEventListener на CardView холст и позволить ему перевести и перерисовать. Нет необходимости, чтобы холст HandView просматривал его представления.

Answer 3

Я опаздываю на эту вечеринку, но ИМО ни взгляды, ни модели / коллекции не место для размещения такой логики.

Если вы используете fabric или какую-то другую библиотеку (у меня есть приложение, использующее raphael.js), вы должны создать специальный модуль, который обрабатывает рисование / манипуляции и отвечает на события холста, используя локальную обработку событий (т. Е. https://github.com/kangax/fabric.js/wiki/Working-with-events).

Если вам нужно сообщить об этих событиях, вы должны показывать их программно и использовать магистральные события, чтобы опубликовать их в других магистральных компонентах.

Вы не должны тесно связывать свои модели и виды способами, предложенными выше.

Answer 4

Я только начинаю работать с backbone.js, но я бы, вероятно, сделал бы базовый просмотр (скажем, canvasView), который рендерит и прослушивает события на холсте. Событие click может быть отправлено методу в объектах представления, и в этом методе вы выполняете свой алгоритм сопоставления объектов и другую логику.