bem-mvc — это реализация в БЭМ-терминах MV*-паттерна с провязкой с DOM-ом. Мы расскажем об особенностях этой библиотеки, какие задачи она решает и как облегчает разработку интерфейса Яндекс.Директа.

1. bem-mvc, или как
клеить моделей
Сергей Максимов
BEMup в рамках YaC 2013, Москва

2. Яндекс.Директ
Особенности
Формы с большим количеством полей
Поля формы могут зависеть друг от друга
Полем формы может быть сложный элемент (другая форма)
Все данные нужно валидировать
2

3. i-bem, anybody?
3

4. i-bem block

5. Еще один велосипед

6. Почему велосипед?
Требования
декларативность
i-bem ориентированность
автоматизация рутинных действий
Доработка существующих решений была бы равносильна
разработке собственной.
6

7. Составные части
M
i-model
модели, неймспейс
BEM.MODEL
V
*
любой i-bem блок
i-glue
блок “проклеивающий”
модель и
DOM-представление
C
7

8. Ммм... модели

9. Модели. Декларация
9

10. Модели. Декларация
10

11. Модели. Валидация
11

12. Модели. Создание
12

13. Модели. Создание
13

14. Модели. Хранилище
14

15. Модели. Работа с полями
15

16. Поля модели. Типы
Простые
string
number
boolean
Составные
array
model
model-list
16

17. Модели. События
17

18. i-glue

19. i-glue

20. Блок баннер
20

21. Биндинги. i-glue
21

22. Биндинги. i-glue
22

23. Биндинги. i-glue
23

24. Биндинги. model-field
24

25. Биндинги. model-field
25

26. Биндинги. model-field
26

27. Биндинги. Типы model-field
Контролы
input
select
checkbox
View
inline
mod
27

28. Биндинги. Почему не data-атрибуты?
Примиксованные блоки позволяют
Не обходить весь DOM
Работать с биндингом, как с i-bem блоком
Просто создавать собственные
28

29. DEMO

30. Репозиторий
github.com/bem/bem-mvc
30

31. Сергей Максимов
Руководитель группы интерфейсов
Справочника и Директа
@dosyara
ddos@yandex-team.ru
31

32. Спасибо