Практика проектирования фреймворка JavaScript для интерфейса редактирования на месте - PullRequest
Новая
       34

Практика проектирования фреймворка JavaScript для интерфейса редактирования на месте

0 голосов
/ 05 июля 2011

Я программирую CMS, которая позволяет создавать и редактировать элементы (блоки контента) на сайте в режиме WYSIWYG. в основном, когда вы вошли в систему, вы визуально видите один и тот же веб-сайт, но при наведении курсора и нажатии на элементы появляются либо редакторы (например, Aloha), либо дополнительные элементы управления.

Например:

  • при наведении на абзац будет отображаться небольшое меню на его стороне, которая позволяет выбирая между левым, центральным и выравнивание по правому краю
  • нажатие на абзац сделает его редактируемым
  • при наведении курсора на изображение будет отображаться точка с правой стороны изображения, которую можно перетаскивать, изменяя ширину изображения (высота будет пропорционально обновляться)
  • при наведении курсора на любой из блоков на веб-сайте появится кнопка «+», позволяющая создать еще один блок перед наведенным блоком.
  • и т.д.

Моя текущая стратегия состоит в том, чтобы использовать аналогичную технику, которую я видел в Nike Better World и с тех пор использую: существует экземпляр javascript, который вызывает плагин jquery для каждого элемента html, который имеет данные. атрибут controller, имя плагина определяется атрибутом data-controller.

Немного расширив эту концепцию, я бы использовал ее для прикрепления всех видов элементов управления к блокам контента.

Но, будучи новичком, только недавно я наткнулся на фреймворки javascript mvc, такие как backbone.js. Я работал с MVC на стороне сервера (в Кохане), но еще никогда не работал в javascript. Кажется, я могу это использовать, но мне неясно, какова будет стратегия. CMS, над которой я работаю, является своего рода гибридом между правильным javascript-приложением и html-сайтом старой школы. Я не понимаю, как я могу использовать, например, объект коллекции backbone.js для блоков контента, если они уже загружены в HTML страницы (для меня нет смысла загружать их с помощью javascript).

У кого-нибудь есть предложения?

1 Ответ

0 голосов
/ 18 августа 2011

Быстрый ответ:

ContentModel: это элемент данных, который вы хотите редактировать.Актуальное содержание.Например: $(#mydiv).text();

DisplayView: представление, которое будет отображать эти данные (это когда ContentModel впервые создается и инициализируется с помощью $('#mydiv).text()

EditView: представление «редактирования» этих данных(возможно, текстовая область) - при создании инициализируется с помощью ContentModel (тот же объект модели)

EditTemplate: соответствующий HTML-код «как» должно выглядеть в окне редактирования (может заполняться и создаваться с использованием _.template(...), т. е., текстовое поле / поле и т. д.,

Теперь DisplayView хранит текущее значение текста (в его модели) при самой инициализации. Если у вас есть кнопка / ссылка «редактировать» в этом представлении (блок div длянапример), щелкнув по нему, вы создадите новый EditView и просто «прячете» текущий div (#mydiv), который показывает текст и показывает EditView, загруженный с данными модели на своем месте ($.append() ваш лучший друг здесь).

Вы нажимаете кнопку «Отмена», просто скрываете / удаляете EditView и отображаете нижележащий элемент div. Если вы обновляетесь, при успешном завершении (с сервера) просто скрываете EditView и отображаете данныена DisplayView!DisplayView может подписаться на событие «изменения» модели!Так что, как только модель изменится, представление знает, что делать !!

Надеюсь, это поможет!

...