jQuery-ui 可调整大小，在 Marionette.ItemViem 上不起作用

jQuery-ui resizable not working on Marionette.ItemViem

本文关键字：Marionette ItemViem 不起作用 可调整 jQuery-ui      更新时间：2023-09-26

我正在尝试制作一个应用程序，用户可以在其中单击并拖动到区域内以创建矩形。问题是该区域是一个Marionette.CollectionView，用户通过拖动和释放鼠标按钮正在创建一个 新Rectangle model ，该被添加到集合中(负责渲染它(。

这是项目视图的代码

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。虽然可拖动工作正常，但可调整大小根本不起作用。(我还包含必要的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);
  }
});

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

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

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

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

相关文章：