Создание плагина jQuery UI: IIFE и возвращаемый объект

Question

Я пытаюсь создать небольшой плагин 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);

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