1. Фреймворк
Durandal.JS
Виктор Сотов
DataArt

2. Выбор фреймворка

3. Почему Durandal
• Минимальный порог входа
• Мощная композиция представлений
• Богатая событийная модель страницы
• Построен на известных библиотеках
(knockout, requirejs, jQuery)
• Модульный

4. Содержание
• Структура приложения
• Модули
• Представления
• Композиция
• Роутинг
• Pub & Sub

5. Структура приложения

6. Модули

7. Пример модуля
define(['durandal/app', 'knockout'], function (app, ko) {
var name = ko.observable();
return {
displayName: 'What is your name?',
name: name,
sayHello: function() {
app.showMessage('Hello ' + name() + '!', 'Greetings');
}
};
});

8. Observable модуль
• Никаких ko.observable()
• Использование обычных JS объектов
• Легко включить

9. Views

10. Обычный HTML

11. Связывание обрабатывается
KnockoutJS

12. Жизненный цикл страницы

13. Композиция

14. Пример
• Простая композиция
• Шаблонная композиция

15. Роутинг

16. Пример конфигурации

17. Параметризированный роутинг
• Маршрут
• Использование

18. Pub & Sub
• Publish
• Subscribe

19. Другие возможности
• Диалоги
• Виджеты
• Сборка проекта

20. Q&A

21. Links
• Durandaljs.com
• Docs - Durandaljs.com/docs