Как обрабатывать состояние пользовательского интерфейса для приложения для одной страницы с основным

Question

Положите меня, когда я прихожу из традиционного фона веб -разработки, используя ASP.NET и даже MVC на стороне сервера. Я пытаюсь создать очень интерактивное приложение для одного страницы с помощью Backbone.js, чтобы помочь организовать мой код JavaScript и создать пользовательский интерфейс.

У меня проблемы с некоторыми понятиями или подходов к созданию компонентов моего пользовательского интерфейса и принятии решения о том, как обрабатывать определенные аспекты. Я собираюсь использовать этот упрощенный снимок экрана в качестве основы для моих вопросов и обсуждения.

В качестве примера (конечно, давайте используем приложение «дел» (конечно) довольно простой. У меня есть следующие «компоненты» ...

• Список результатов, который показывает текущий набор дел, которые соответствуют выбранным в настоящее время критериям
• Список моих списков дел (личная, работа, проект блога)
• Список фильтров срока срока (сегодня, завтра, на этой неделе, на следующей неделе)
• Список тегов (ошибка, функция, идея, последующее наблюдение)
• Поле поиска

Желаемая функциональность

• Обновите результаты всякий раз, когда какие -либо из критериев поиска изменяются (выберите список, выберите данные, выберите один или несколько тегов, введите текст поиска и т. Д.)
• Пользователь может редактировать, добавить и удалять списки. (не на самом деле показано в этом макете)
• Пользователь может редактировать, добавить и удалять теги. (не на самом деле показано в этом макете)
• Пользователь может редактировать, добавить и удалять элементы дел. (не на самом деле показано в этом макете)

Модели данных

Есть несколько моделей, которые я определил, связанные с «данными». Это было легко идентифицировать.

• Todo (представляет собой один предмет)
• Todocollection (представляет собой набор предметов дел)
• Todolist (представляет собой один список дел)
• Todolistcollection (представляет собой набор списков дел)
• TAG (представляет один тег)
• TagCollection (представляет собой коллекцию тегов)

Как хранить состояние пользовательского интерфейса?

Здесь у меня проблемы. Я хочу показать, какие элементы в моих меню (с левой стороны) выбираются в настоящее время. Я, безусловно, могу слушать события и добавить «выбранный» класс в элементы по мере их выбора, но у меня также есть правила, например, «можно выбрать только один список за раз», но «любое количество тегов» может быть выбрано в время. Кроме того, поскольку меню списка дел и меню тегов динамичны, они уже связаны с моделями Todolistcollection и Tagcollection. Они отображаются в соответствии с состоянием этих «моделей данных».

Итак, как мне справиться с управлением этим состоянием пользовательского интерфейса для всех этих разных представлений, используя магистраль? Я ценю любые идеи или предложения.

Спасибо!

Answer 1

У меня был именно тот вопрос, который вы задали, и я дам вам знать секрет: чит.

То, что у вас есть, - это два разных слоя приложений, и некоторые путаницы в них. Первый слой-это взаимосвязь между объектами в вашей системе. Они храните в традиционной реляционной модели объекта, и вы создаете/извлекаете/обновляете/удаляете их, как и в любом другом Restful Application.

Второй слой - это взаимосвязь между вашим отображением этих объектов и самими объектами. Там есть какое -то состояние, которое вы хотите сохранить. Вот важное понимание: до тех пор, пока каждый объект получает, помещается или опубликовал в систему, есть уникальный идентификатор, второй слой может быть полностью независимым от первого.

Первый слой-это RESTFUL API для «TO DO DO». Второе - что -то уникальное для этой презентации. Это отношение к данным в первом - это незначительное. Итак, вот что я сделал: я закодировал это состояние презентационного уровня в объект JSON и написал его в 8-битное чистое текстовое поле в профиле пользователя. Каждый раз, когда пользователь меняет состояние, я делаю это.

Когда приложение загружается, оно загружает основную часть данных из API REST и информации о презентационном уровне, отбрасывает любое в презентационном уровне, который не имеет смысла, а затем начинает магистраль. Инициализирует презентацию. И сервер не нужно знать Любые Подробнее о том, как работает клиент. Пока клиент говорит на вашем спокойном жаргоне, он может сохранить «разные вещи, которые этот конкретный клиент заботится» на этом текстовом поле, не влияя на ваши объекты или их отношения.