Изменяемый / выбираемый пользовательский интерфейс jQuery не работает в Backbone View
У меня есть представление для моей модели, и в инициализации я использую следующий код
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 (я включаю необходимый jquery-ui.css в мой HTML). Когда представление отображается, я проверяю элемент в своем браузере, и он действительно имеет класс ui.draggable, ui.resizable
а также ui.selectable
как и положено, но это только перетаскивается.
Пытаясь обойти эту проблему, я использовал свойство CSS3 resize: both
в классе элемента я хочу изменить размер, и он работает просто отлично, но я действительно хотел бы использовать jQuery UI для изменения размера, и мне любопытно, почему это не будет работать.
Есть идеи, что я могу делать не так?
РЕДАКТИРОВАТЬ: Добавлен пример jsfiddle http://jsfiddle.net/IgnorantUser/u7JkX/ описанная проблема заключается в инициализации ButtonInCanvas
вид позвоночника
1 ответ
Хорошо, так, по-видимому, используя this.$el.html(this.template(this.model.toJSON()));
в моей функции рендеринга на ButtonInCanvas
вид был причиной проблем. Вышеупомянутое получает атрибут "заголовок" модели и передает его в представление в виде HTML-содержимого.
Там решение поставить this.$el.html(this.template(this.model.toJSON()));
в функции инициализации. В случае, если это необходимо сделать в функции рендеринга, должен быть другой div, внутри того, который мы хотим изменить, который получит свойство caption из модели. В следующем JSBIN вы можете увидеть решение, используя div внутри кнопки. (спасибо пользователю shoky, из канала #jquery freenode irc за реализацию и его руководителей) http://jsbin.com/uxequq/1/edit
Я не очень понимаю, почему проблема возникала, хотя (может быть, this.template(this.model.toJSON())
в моей функции рендеринга вызывал повторный рендеринг вида?
Ура!