Шаблон проектирования: Использование Javascript MVC для создания панели инструментов - PullRequest
Новая
       15

Шаблон проектирования: Использование Javascript MVC для создания панели инструментов

1 голос
/ 24 января 2012

Итак, я создаю сложное веб-приложение, частью которого является создание панели инструментов.

  • Панель инструментов будет состоять из кнопок или подпанелей.
  • К каждой кнопке должно быть прикреплено действие - ее можно щелкнуть или перетащить куда-нибудь, чтобы обеспечить функцию
  • Иногда при нажатии кнопки на панели появляется значок панель инструментов с интересными вещами:)
  • По мере развития приложения появляются новые кнопки
  • Я могу изменить порядок кнопок или прикрепить существующую панель к другой кнопке

Я хочу спроектировать все это приложение, используя JQuery MX. Панель инструментов является сутью приложения и будет закодирована первой, поэтому я намерен использовать эту разработку, чтобы научиться использовать свое первое приложение MVC JQuery.

Может ли кто-нибудь предложить отправную точку относительно того, как начать этот вид зверя?

Я понимаю, что контроллер является отправной точкой и закодирован как функция JQuery, но не совсем уверен, как модели и представления будут работать с этим в JQuery MX

1 Ответ

1 голос
/ 24 января 2012

Я на самом деле создал веб-приложение с панелью инструментов, но не в JavaScript MVC (что, на мой взгляд, было излишне сложно).

Создайте файл конфигурации, как buttonName : actionName. Контроллер запускает файл конфигурации и назначает действие событию нажатия кнопки.

Моя панель инструментов была довольно маленькой (десять кнопок или около того, хотя они и менялись), поэтому я держал все действия в одном контроллере, хотя каждое действие представляло собой только пару строк, вызывая отдельный плагин. Если у вас много кнопок, вы можете разделить действия на разные контроллеры.

Затем у вас есть плагин с набором универсального кода, который обрабатывает визуальное представление панели инструментов - тени, цвета фона, управление значками и т. Д. Просто используйте addClass / removeClass и стилизуйте различные состояния кнопок с помощью CSS. Для HTML я сделал каждую кнопку тэгом '', поэтому она изящно деградировала.

Подпанели - это просто дополнительные функции на уровне представления.

...