jQuery-ui resizable not working on Marionette.ItemViem

Question

I'm trying to make an application where the user will be able to click and drag inside an area to create rectangles. The catch is that the area is a Marionette.CollectionView and the user by dragging and releasing the mouse button is creating a new Rectangle model, that gets added to the collection (which takes care of rendering it).

Here's the itemView's code

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

});

Within the initialize method I set the view's element to be draggable and resizable. While draggable works fine, resizable doesn't work at all. (I am also including the necessary jquery-ui.css file)

The above ItemView gets appended as soon as I add the model to the CollectionView (which happens on a custom event of my CollectionView) here's the code for the 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);
  }
});

Any ideas of what I could be doing wrong, causing the .resizable not to work?

Answer 1

Silly me! As i was told by user seutje in the #jquery irc.freenode channel, I should attach the jquery-ui methods onRender instead of initialization

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

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

Everything works now, but I would like feedback whether this is optimal. Considering that I'm attaching methods onRender, during resize the ItemView gets re-rendered, therefore while onRender gets called whenever I resize the item and as a result re-attaches .draggable and .resizable?