jQuery UI 可调整大小/可选择在主干视图中不起作用答案

【问题标题】：jQuery UI resizable/selectable not working in Backbone ViewjQuery UI 可调整大小/可选择在主干视图中不起作用
【发布时间】：2013-01-15 09:19:52
【问题描述】：

我的模型有一个视图，在初始化时我使用以下代码

initialize: function (){
        _.bindAll(this, 'render'); 
        this.listenTo(this.model, "change", this.render);
        this.$el.draggable({
            opacity: 0.5,
            containment: "parent"
        });
        this.$el.resizable();
        this.$el.selectable();
    },

虽然可拖动有效，但 resizable 和 selectable 无效（我没有测试其他 jQuery UI 交互来检查它们是否有效）。我尝试将this.$el.resizable 放在渲染函数中，但这也不起作用。我正在使用 jQuery 1.8.3 和 jQuery UI 1.9.2（我确实在我的 html 中包含了必要的 jquery-ui.css）。当视图呈现时，我检查浏览器中的元素，它确实有一个 ui.draggable, ui.resizable 和 ui.selectable 类，但它只能拖动。

为了解决这个问题，我在要调整大小的元素的类中使用了 CSS3 属性 resize: both，它工作得很好，但我真的很想利用 jQuery UI 来调整大小，我'很好奇为什么它不起作用。

任何想法我可能做错了什么？

编辑：添加了 jsfiddle 示例 http://jsfiddle.net/IgnorantUser/u7JkX/ 所描述的问题是在 ButtonInCanvas 主干视图的初始化中

【问题讨论】：

元素何时被插入到 DOM 中？
您可以查看 jsfiddle，但是一旦发生“drop”事件，该元素就会被附加到 DOM。拖放发生在 CanvasView 中，但使用名为 passDrop 的方法，我将拖放事件（连同坐标）传递给拖放到画布中的可拖动“ButtonInToolbar”。然后使用 dropHandler 方法，我将一个新的“ButtonInCanvas”附加到 DOM
我应该报告这方面的错误吗？根据我的阅读，以前版本的 jQuery UI 在事件委托方面存在问题，也许我偶然发现了一个错误？
也用 jQuery 1.9.0 和 jQuery UI 1.10.0 测试过，问题依然存在

标签： jquery-ui backbone.js backbone-views jquery-ui-resizable jquery-ui-selectable

【解决方案1】：

好吧，显然在ButtonInCanvas 视图的渲染函数中使用this.$el.html(this.template(this.model.toJSON())); 导致了问题。上述获取模型的“caption”属性，并将其作为html内容传递到视图中。

解决方案是将this.$el.html(this.template(this.model.toJSON())); 放入init 函数中。如果需要在渲染函数中完成，应该有另一个 div，在我们想要调整大小的那个中，它将从模型中获取标题属性。在下面的 JSBIN 中，您可以看到在按钮内使用 div 的解决方案。（感谢用户 shoky，来自 #jquery freenode irc 频道的实现和他的提醒） http://jsbin.com/uxequq/1/edit

我真的不明白为什么会出现问题（可能是我的渲染函数中的 this.template(this.model.toJSON()) 导致视图重新渲染？）所以请随时指出原因，并帮助我进一步了解！

干杯！

【讨论】：

由于您更改了具有 ui-selectable 或 ui-resizable 的元素的 html，因此 selectable 和 resizable 需要更新或重新应用。因为可选择/可调整大小所基于（并已应用事件）的所有 html 已被删除或完全更改