Создание плагина jQuery UI: IIFE и возвращаемый объект
Я пытаюсь создать небольшой плагин jQueryUI, который позволяет пользователю рисовать прямоугольники на div#canvas
, Плагин расширяется ui.mouse
и заботится о добавлении помощника, чтобы визуализировать процесс рисования прямоугольника, но он на самом деле не отображает его.
Вместо этого он должен вернуть boxProperties
возражать, но я не смог этого сделать. Я довольно новичок в IIFE и не до конца понял закрытие, но я подозреваю, что решение лежит где-то там. Я пробовал кое-что, но из-за недостатка знаний ничего не смог достичь.
Подвох в том, что div#canvas
(где нарисованы прямоугольники), на самом деле Marionette.CollectionView
и сами прямоугольники будут Marionette.ItemView
динамически добавляется в представление коллекции, которое будет отображать их сразу после их отрисовки.
Что я должен добавить к своему коду, чтобы как только рисовался прямоугольник, возвращался объект boxProperties, чтобы я мог передать его прямоугольнику ItemView для его визуализации?
Вот мой код плагина
(function($, undefined){
$.widget('nc.boxMaker', $.ui.mouse, {
version: '0.0.1',
options: {
distance: 60
},
_create: function() {
el = this.element;
screenOffset = el.offset();
screenOffset.left = Math.round(screenOffset.left);
screenOffset.top = Math.round(screenOffset.top);
this._mouseInit();
},
_mouseStart: function(event) {
this.coords = [event.pageX - screenOffset.left, event.pageY - screenOffset.top];
this.boxHelper = $(document.createElement('div'));
this.boxHelper.css({
"border":'1px dotted black',
"z-index": 100,
"position": "absolute",
"left": this.coords[0],
"top": this.coords[1],
"width": 10,
"height": 10
});
el.append(this.boxHelper);
},
_mouseDrag: function(event) {
var x1 = this.coords[0], y1 = this.coords[1],
x2 = event.pageX - screenOffset.left, y2 = event.pageY - screenOffset.top;
if (x1 > x2) { var tmp = x2; x2 = x1; x1 = tmp; }
if (y1 > y2) { var tmp1 = y2; y2 = y1; y1 = tmp1; }
boxProperties = {left: x1, top: y1, width: x2-x1, height: y2-y1};
this.boxHelper.css(boxProperties);
},
_mouseStop: function(event) {
this.boxHelper.remove();
return boxProperties;
}
});
})(jQuery);
1 ответ
В конце концов я использовал jQuery-UI _trigger
метод
_mouseStop: function(event) {
this.boxHelper.remove();
console.log("about to trigger view event!")
this._trigger("stoppedDrawing", event, boxProperties);
}
Поэтому всякий раз, когда вызывается метод _mouseStop, мы собираемся удалить вспомогательный прямоугольник и вызвать событие типа "stoppedDrawing"
а также передать boxProperties
, Обратите внимание, что полный тип события будет "boxmakerstoppeddrawing"
потому что я назвал мой плагин JQuery-UI boxMaker
,
Теперь вернемся в мой Marionette.CollectionView, я инициализирую вид
initialize: function() {
this.$el.boxMaker();
},
А потом я добавляю свои события
events: {
'boxmakerstoppeddrawing' : 'drawingHandler'
},
Так как я вычисляю вещи, у меня есть функция на моем itemViewOptions
, который возвращает boxProperties
объект
itemViewOptions: function() {
return boxProperties;
}
И последнее, но не менее важное: у меня есть DrawingHandler, который заботится о создании экземпляра модели Rectangle с boxProperties и добавлении его в коллекцию (которая заботится о добавлении).
drawingHandler: function() {
var rectangle = new Rectangle();
this.collection.add(rectangle);
}