jQuery-ui 可调整大小不适用于 Marionette.ItemViem答案

【问题标题】：jQuery-ui resizable not working on Marionette.ItemViemjQuery-ui 可调整大小不适用于 Marionette.ItemViem
【发布时间】：2013-11-25 20:41:32
【问题描述】：

我正在尝试制作一个应用程序，用户可以在该应用程序中单击并在区域内拖动以创建矩形。问题是该区域是一个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 可以正常工作，但 resizable 根本不起作用。（我还包括必要的 jquery-ui.css 文件）

只要我将模型添加到 CollectionView（发生在我的 CollectionView 的自定义事件上），上面的 ItemView 就会被附加这是 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);
  }
});

关于我可能做错了什么，导致 .resizable 不起作用的任何想法？

【问题讨论】：

标签： javascript jquery-ui marionette jquery-ui-resizable

【解决方案1】：

我傻了！正如用户 seutje 在#jquery irc.freenode 频道中告诉我的那样，我应该附加 jquery-ui 方法 onRender 而不是初始化

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

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

现在一切正常，但我想要反馈这是否是最佳的。考虑到我正在附加方法 onRender，在调整大小期间 ItemView 会重新渲染，因此，每当我调整项目大小并因此重新附加 .draggable 和 .resizable 时都会调用 onRender？

【讨论】：