Изменяемый / выбираемый пользовательский интерфейс 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()) в моей функции рендеринга вызывал повторный рендеринг вида?

Ура!

Другие вопросы по тегам