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

Answer 1

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

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

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

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

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

1 个答案: