Question

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

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();
    },

虽然可拖动工作，可调整大小和可选择不起作用（我没有测试过其他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主干视图的初始化

Answer 1

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

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

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

干杯！

jQuery UI可调整大小/可选择不在Backbone View中工作

1 个答案: