Шаблон Breeze/Knockout

Мэдс Кристенсен

Шаблон MVC Breeze/Knockout был написан УордОм Беллом

Скачать шаблон MVC Breeze/Knockout

Вы слышали о "одностраничных приложениях" (SPA) и задавались вопросом, что это такое. Хотя вы могли бы прочитать об этом, вы бы предпочли испытать это для себя. Но у кого есть время, чтобы скачать пример? Если у вас есть Visual Studio, вы получите пример spa и будет работать менее чем за 60 секунд с шаблоном ASP.NET MVC 4 "Одностраничное приложение Breeze/Knockout".

Что такое шаблон SPA Breeze/Knockout?

Большинство шаблонов проектов создают структуру приложения. Вы наложите плоть на эти кости, добавив свой код и в конечном итоге добавьте рабочее приложение. Шаблон Spa Breeze/Knockout отличается. Он создает пример приложения для изучения. В нем демонстрируется проектирование приложения SPA и многие методы создания SPA.

Шаблон Breeze/Knockout — это разновидность шаблона Spa KnockoutJS, включенного в обновление ASP.NET and Web Tools 2012.2. Шаблон Spa Breeze создает приложение с тем же пользовательским интерфейсом, но имеет другую реализацию, используя Breeze для управления данными.

Шаблон Spa KnockoutJS отправляет запросы на обслуживание с необработанным jQuery AJAX, который подходит для простого приложения. Но более сложные приложения предъявляют более требовательные требования к управлению данными. Например, большинство приложений:

• Запрос и повторный запрос к серверу во время расширенного сеанса пользователя.
• Добавьте фильтры запросов, сортировку и разбиение по страницам.
• Совместно использовать одни и те же данные на нескольких экранах.
• Накапливайте изменения во многих объектах, а затем сохраняйте их в виде одной транзакции.
• Проверьте изменения на клиенте, чтобы пользователь смог исправить ошибки перед фиксацией изменений в базе данных.

Библиотека BreezeJS выполняет эти обязанности за вас, освобождая вас для разработки логики приложения и взаимодействия с пользователем, которые имеют наибольшее значение.

Breeze — это библиотека открытый код для создания многофункциональных приложений для работы с данными на JavaScript и HTML, которые исторически предоставлялись как автономные классические приложения.

Шаблон Breeze/Knockout помогает сделать первый важный шаг на пути к более надежной инфраструктуре управления данными. Он создает пример приложения Todo, который внешне идентичен шаблону Spa KnockoutJS. Внутри он заменяет уровень данных AJAX на Breeze, поэтому вы можете сравнить два подхода параллельно. Конечно, это едва затрагивает потенциал приложения Breeze. Но вы увидите, как работает Breeze и как мало требуется для этого перехода.

Итак, начнем.

Создание проекта шаблона Breeze/Knockout

Скачайте и установите шаблон, нажав кнопку Скачать выше. Шаблон упаковается в виде файла расширения Visual Studio (VSIX). Может потребоваться перезапустить Visual Studio.

В области Шаблоны выберите Установленные шаблоны и разверните узел Visual C# . В разделе Visual C# выберите Интернет. В списке шаблонов проектов выберите ASP.NET веб-приложение MVC 4. Задайте для проекта имя и щелкните ОК.

В мастере создания проекта выберите Breeze Knockout SPA.

Нажмите клавиши CTRL+F5, чтобы выполнить сборку и запуск приложения без отладки, или клавишу F5 для запуска с отладкой.

При первом запуске приложения отображается экран входа. Щелкните ссылку "Регистрация", и отобразится новая страница, где можно ввести имя пользователя и пароль. (Страницы входа и регистрации создаются с помощью ASP.NET MVC.) При отправке формы регистрации сервер создает список TodoList с двумя элементами для вашей учетной записи. Затем он представляет их вам на желтой ноте.

Теперь вы находитесь в стране SPA. Все, что вы видите и испытываете при работе с Todos, отрисовывается и управляется на клиенте с помощью Knockout и Breeze. Изучите приложение в качестве пользователя ... но с глазом разработчика. Используйте средства разработчика в браузере для записи сетевого трафика. (В Интернете Обозреватель: нажмите клавишу F12, перейдите на вкладку Сеть и нажмите кнопку Начать запись.) Теперь попробуйте следующее:

• Добавьте новый элемент списка дел.
• Щелкните метку и измените заголовок элемента списка дел.
• Установите флажок, чтобы пометить элемент как завершенный. Обратите внимание, что текстовое поле отключено, поэтому заголовок больше не может изменяться.
• Щелкните значок "x" справа от метки. Элемент исчезает и удаляется из базы данных.
• Выберите другой элемент и очистите его название. Вы получите ошибку проверки о том, что название является обязательным. После краткой паузы предыдущий заголовок восстанавливается.
• Введите смехотворно длинный заголовок. Вы получите другую ошибку проверки, так как заголовок слишком длинный.
• Нажмите кнопку "Добавить список дел". Слева от предыдущего списка появится новый список.
• Поиграйте с заголовком TodoList, активируя необходимые проверки и проверки длины.
• Щелкните текстовое поле заголовка, чтобы очистить сообщение об ошибке.
• Щелкните "x" в круге в правом верхнем углу, чтобы удалить TodoList и его todos.

Логика проверки выполняется на стороне клиента с помощью Breeze. Атрибуты проверки в классах модели сервера распространяются на клиент и выполняются автоматически, прежде чем клиент обращается к серверу.

Проверьте сетевой трафик. Обратите внимание, что при обнаружении ошибки Breeze не было вызовов к серверу. Каждое допустимое изменение приводило к запросу POST к "/api/Todo/SaveChanges". Breeze объединяет изменения и отправляет их вместе в виде единого запроса к методу контроллера SaveChanges веб-API. Это отличается от шаблона Spa KnockoutJS, который выполняет запросы PUT, POST и DELETE для каждого элемента по отдельности.

Заглянуть внутрь

Это приложение имеет сторону клиента и сервера. Клиентский стек состоит из небольшого html-кода и сочетания модулей JavaScript приложения (в папке app) и сторонних библиотек JavaScript (в папке Scripts).

Если вы изучили шаблон Spa KnockoutJS, это должно выглядеть очень хорошо. Сосредоточьтесь на синих полях. Архитектура пользовательского интерфейса — Model-View-ViewModel (MVVM), в которой мини-приложения HTML представления четко отделены от вспомогательного кода презентации в модели представления. Система привязки данных (в данном случае Knockout) координирует представление и модель представления, чтобы каждый из них смог выполнять свою работу без глубокого знания другого.

Модель инкапсулирует данные todo. Сущности в модели создаются Breeze с наблюдаемыми свойствами Knockout, поэтому их можно привязать непосредственно к мини-приложениям в представлении. Модель представления запрашивает контекст данных для получения и сохранения сущностей модели. Контекст данных делегирует большую часть работы Breeze.

Стек на стороне сервера состоит из кода разработчика и трех основных библиотек .NET: веб-API, Entity Framework и Breeze.NET.

Базовая архитектура аналогична шаблону SPA KnockoutJS. Однако реализация гораздо проще: DTO были удалены, и большинство сведений Entity Framework были делегированы Breeze.NET.

Next Steps

Мы рекомендуем изучить код, руководствуясь подробным обсуждением стека клиента и сервера на веб-сайте Breeze.

Вы можете попробовать выполнить запрос на стороне клиента Breeze. добавьте несколько фильтров и сортировок. Вы можете добавить дополнительные свойства модели и дополнительные сущности, чтобы лучше почувствовать себя при комплексной разработке SPA. Если вы уверены в дизайне, вы можете вырвать функции Todo и заменить их своими собственными.

Скоро вы будете готовы к следующему важному шагу: добавлению клиентских экранов и переходу между ними. Вы оставьте этот шаблон SPA позади и обратиться к более полному стеку SPA, например Джона Папа горячее полотенце, которое добавляет Durandal к бризу и нокаут смеси.