На цей раз будемо знайомитися з DurandalJS, який є базовим фреймворком для нашого сайту, побудованого по архітектурі Single Page Application. У статті будуть описані основні принципи та правила побудови програми на DurandalJS.
Озираючись назад
Розмітка головної сторінки (шаблону)
Так як наш головний модуль main.js запускає за замовчуванням модуль-оболонку shell. який складається з viewmodel і view (shell.js і shell.html). Shell.html - це, якщо так можна висловитися, "точка входу" для візального відображення. На мій погляд, це найоптимальніше місце для розміщення шаблону сайту (дизайну розмітки). Тут і будемо формувати основний вид сайту.
На даний момент вона дуже проста:
Рядок 2 має прив'язку до об'єкта router. Пам'ятайте в минулій статті ми описували маршрути:
Так ось, цей самий BindingHandler прив'язує наші маршрути до розмітки. Раз у нас є маршрути, давайте виведемо їх список:
У рядку 3 я додав прив'язку через foreach до навігаційної моделі (router.navigationModel) DurandalJS. Подивіться що відобразилося на сторінці:
Хочеться трохи поекспериментувати. Давайте створимо новий файл, я назву його footer.html і розміщу його тут же, поруч з файлом home.html.
Далі в shell.html поміняємо розмітку на таку:
Мені здається, не важко здогадатися, що маємо отримати в кінцевому рахунку:
Саме те, що я і хотів. Тепер мій шаблон головної сторінки складається з двох файлів (подань). А значить можна рендеринг маршрутів переносити в файл footer.html. Після перенесення при запуску сайту, я побачив ту ж саму картинку як і на першому скріншоті.
Всі можливі варіанти застосування compose можна подивитися на сайті DurandalJS, де крім цієї інформації є ще купа корисних матеріалів.
Давайте тепер додамо трохи стилів в розмітку на основі правил bootstrap. У мене меню сайту вийшло таким:
У моєму меню два пункти, обидва вони зазначені як маршрути в змінної routes:
Виділена 22 строку не випадково. У цій розмітці здійснюється прив'язка властивість isNavigating у об'єкта router щоб в момент зміни активного маршруту на новий показувався індикатор завантаження, в моєму випадку, відображається progessBar з набору компонентів bootstrap .Приклад роботи перемикання можна подивитися на сайті прикладу.
Сторінка "Про проект"
У списку маршрутів у мене прописаний шлях на сторінку "про проект", але поки такого модуля й гадки не існує. Створимо його. Для цього в папці / views / site / створюю уявлення модуля about.html:
Ось так виглядає сторінка "про проект"
висновок
В якості висновку до цієї статті, хочу розповісти про подальші плани. Наступним етапом, найцікавіше на мій погляд, робота з даними, вірніше з базою даних посредствам Web API. Не просто Web API, а через BreezeJS. Хоча це вже не зовсім пов'язане з DurandalJS, тому що DurandalJS це всього лише інструмент для досягнення мети. А мета у нас зробити сайт з тлумаченням імен.
Що значить ім'я 1: Створюємо новий сайт за принципом Single Page Application
Що значить ім'я 3: База даних для SPA або Code First на EntityFramework