Проблемы с рендерингом BackboneJS
Последние полгода я работаю с Backbone. Первые два месяца я возился, учился и выяснял, как я хочу структурировать свой код вокруг этого. Следующие 4 месяца ушло на разработку -пригодного для производства приложения. Не поймите меня неправильно, Backbone избавил меня от тысячи -строк кода на стороне клиента, которые раньше были стандартом, но он позволил мне делать более грандиозные вещи за меньшее время, открывая совершенно новый набор проблем..Для всех вопросов, которые я поднимаю здесь, есть простые решения, которые кажутся хаками или просто неправильными . Я обещаю награду в 300 баллов за отличное решение. Здесь идет:
- Загрузка-Для нашего варианта использования (панели администратора )пессимистичная синхронизация — это плохо. Для некоторых вещей мне нужно проверить вещи на сервере, прежде чем их принимать. Мы начали до того, как событие «синхронизация» было объединено с Backbone
. и мы использовали этот небольшой код для имитации события загрузки:
window.old_sync = Backbone.sync
# Add a loading event to backbone.sync
Backbone.sync = (method, model, options) ->
old_sync(method, model, options)
model.trigger("loading")
Отлично. Он работает так, как ожидалось, но не кажется правильным. Мы привязываем это событие ко всем соответствующим представлениям и отображаем значок загрузки, пока не получим событие успеха или ошибки от этой модели. Есть ли лучший, более разумный способ сделать это?
Теперь о сложных:
- Слишком многое становится слишком много-Допустим, в нашем приложении есть вкладки. Каждая вкладка управляет коллекцией. С левой стороны вы получите коллекцию. Щелкните модель, чтобы начать ее редактирование в центре. Вы меняете его имя и нажимаете Tab, чтобы перейти к следующему элементу формы. Теперь ваше приложение представляет собой «что-то в реальном времени», которое замечает разницу, выполняет проверки и автоматически синхронизирует изменения с сервером, кнопка «Сохранить» не требуется! Отлично, но H2 в начале формы такое же имя, как и во вводе -, его нужно обновить. О, и вам нужно обновить имя в списке в сторону. О, и список сортируется по именам!
Вот еще один пример :Вы хотите создать новый элемент в коллекции. Вы нажимаете кнопку «новый» и начинаете заполнять форму. Вы сразу добавляете предмет в коллекцию? Но что произойдет, если вы решили отказаться от него? Или если сохранить всю коллекцию на другой вкладке? И есть загрузка файла -. Вам необходимо сохранить и синхронизировать модель, прежде чем вы сможете начать загрузку файла (, чтобы вы могли прикрепить файл к модели ).Итак, все начинает рендериться в дрожи :Вы сохраняете модель и список, и форма снова рендерится сама -теперь она синхронизирована, поэтому вы получаете новую кнопку удаления, и она отображается в списке -, но теперь файл загрузка завершена, поэтому все снова начинает рендеринг.
Добавьте к миксу подвиды, и все станет похоже на фильм Феллини.
Это подвиды до самого низа-Вот хорошая статья об этом . Я не мог из любви ко всему святому найти правильный способ присоединения плагинов jQuery или событий DOM к любому представлению, имеющему подпредставления. Ад наступает мгновенно. Всплывающие подсказки слышат, что рендер идет долго, и начинают суетиться, подвиды становятся зомби -или не отвечают. Это основные болевые точки, поскольку здесь существуют настоящие ошибки, но у меня все еще нет всеобъемлющего решения.
Мерцание-Рендеринг быстрый. На самом деле, это так быстро, что мой экран выглядит так, как будто у него случился припадок. Иногда это изображения, которые должны загружаться снова (с другим вызовом сервера! ), поэтому html минимизирует, а затем снова резко максимизирует -css width+height для этого элемента исправит это. иногда мы можем решить эту проблему с помощью функций fadeIn и fadeOut -, писать которые очень сложно, поскольку иногда мы повторно используем представление, а иногда создаем его заново.
TL;DR-У меня проблемы с представлениями и подпредставлениями в Backbone -Он рендерится слишком много раз, мерцает при рендеринге, подпредставления отделяют мои события DOM и съедают мои мозги.
Благодарю вас!
Подробнее :BackboneJS с Ruby on Rails Gem. Шаблоны с использованием шаблонов UnderscoreJS.