jQuery-ui resizable не работает на Marionette.ItemViem

Question

Я пытаюсь создать приложение, в котором пользователь сможет щелкнуть и перетащить область, чтобы создать прямоугольники. Уловка состоит в том, что область является Marionette.CollectionView, и пользователь, перетаскивая и отпуская кнопку мыши, создает новый Rectangle model, который добавляется в коллекцию (которая позаботится о ее рендеринге).

Вот код в itemView в

var RectangleView = Backbone.Marionette.ItemView.extend({ 
    template: "<div> </div>", 
    className: "rectangle", 
    events: {}, 


    initialize: function(){ 
    this.$el.draggable({ 
     containment: 'parent' 
    }); 
    this.$el.resizable(); 
    this.setCssStyle(); 
    }, 

    setCssStyle: function (options) { 
    that = this; 
    this.$el.css({ 
     'width': that.options.width + 'px', 
     'height': that.options.height + 'px', 
     'top': that.options.top + 'px', 
     'left': that.options.left + 'px', 
     'border': '1px solid black', 
     'position': 'absolute' 
    }); 
    } 

}); 

В методе initialize я поставил элемент мнение, чтобы быть draggable и resizable. В то время как draggable работает нормально, изменение размера не работает вообще. (Я также включаю в себя необходимый файл jquery-ui.css)

Приведенный выше ItemView добавляется, как только я добавляю модель в CollectionView (что происходит на пользовательском событии моего CollectionView), вот код для CollectionView

var ScreenView = Backbone.Marionette.CollectionView.extend({ 
    template: "<div> </div>", 
    className:"screen", 
    itemView: RectangleView, 
    events: { 
    'boxmakerstoppeddrawing' : 'drawingHandler' 
    }, 

    initialize: function() { 
    this.$el.boxMaker(); 

    }, 

    itemViewOptions: function() { 
    return boxProperties; 
    }, 


    drawingHandler: function() { 
    var rectangle = new Rectangle(); 
    this.collection.add(rectangle); 
    } 
}); 

Любые идеи о том, что я могу делать неправильно, вызывая невозможность работать?

Answer 1

Глупый меня! Как мне сказали пользователем seutje в канале #jquery irc.freenode, я должен прикрепить на JQuery-щ методы onRender вместо инициализации

initialize: function(){ 
    this.setCssStyle(); 
    }, 

    onRender: function(){ 
    this.$el.draggable({ 
     containment: 'parent' 
    }); 
    this.$el.resizable(); 
    } 

Все работает, но я хотел бы обратную связь, является ли это оптимальным. Учитывая, что я привязываю методы onRender, при изменении размера ItemView получает повторное рендеринг, поэтому, когда onRender вызывается всякий раз, когда я изменяю размер элемента и, как результат, снова присоединяется .draggable и .resizable?