![Page 1: Сергей Максимов — bem-mvc, или как клеить моделей](https://reader036.vdocuments.pub/reader036/viewer/2022081720/55a2bba71a28ab505f8b4780/html5/thumbnails/1.jpg)
bem-mvc, или как клеить моделейСергей МаксимовBEMup в рамках YaC 2013, Москва
![Page 2: Сергей Максимов — bem-mvc, или как клеить моделей](https://reader036.vdocuments.pub/reader036/viewer/2022081720/55a2bba71a28ab505f8b4780/html5/thumbnails/2.jpg)
Яндекс.Директ
Особенности
Формы с большим количеством полей
Поля формы могут зависеть друг от друга
Полем формы может быть сложный элемент (другая форма)
Все данные нужно валидировать
2
![Page 3: Сергей Максимов — bem-mvc, или как клеить моделей](https://reader036.vdocuments.pub/reader036/viewer/2022081720/55a2bba71a28ab505f8b4780/html5/thumbnails/3.jpg)
i-bem, anybody?
3
![Page 4: Сергей Максимов — bem-mvc, или как клеить моделей](https://reader036.vdocuments.pub/reader036/viewer/2022081720/55a2bba71a28ab505f8b4780/html5/thumbnails/4.jpg)
i-bem block
![Page 5: Сергей Максимов — bem-mvc, или как клеить моделей](https://reader036.vdocuments.pub/reader036/viewer/2022081720/55a2bba71a28ab505f8b4780/html5/thumbnails/5.jpg)
Еще один велосипед
![Page 6: Сергей Максимов — bem-mvc, или как клеить моделей](https://reader036.vdocuments.pub/reader036/viewer/2022081720/55a2bba71a28ab505f8b4780/html5/thumbnails/6.jpg)
Почему велосипед?
Требования
декларативность
i-bem ориентированность
автоматизация рутинных действий
Доработка существующих решений была бы равносильна разработке собственной.
6
![Page 7: Сергей Максимов — bem-mvc, или как клеить моделей](https://reader036.vdocuments.pub/reader036/viewer/2022081720/55a2bba71a28ab505f8b4780/html5/thumbnails/7.jpg)
Составные части
7
M i-model модели, неймспейс BEM.MODEL
V * любой i-bem блок
C i-glueблок “проклеивающий”
модель и DOM-представление
![Page 8: Сергей Максимов — bem-mvc, или как клеить моделей](https://reader036.vdocuments.pub/reader036/viewer/2022081720/55a2bba71a28ab505f8b4780/html5/thumbnails/8.jpg)
Ммм... модели
![Page 9: Сергей Максимов — bem-mvc, или как клеить моделей](https://reader036.vdocuments.pub/reader036/viewer/2022081720/55a2bba71a28ab505f8b4780/html5/thumbnails/9.jpg)
Модели. Декларация
9
![Page 10: Сергей Максимов — bem-mvc, или как клеить моделей](https://reader036.vdocuments.pub/reader036/viewer/2022081720/55a2bba71a28ab505f8b4780/html5/thumbnails/10.jpg)
Модели. Декларация
10
![Page 11: Сергей Максимов — bem-mvc, или как клеить моделей](https://reader036.vdocuments.pub/reader036/viewer/2022081720/55a2bba71a28ab505f8b4780/html5/thumbnails/11.jpg)
Модели. Валидация
11
![Page 12: Сергей Максимов — bem-mvc, или как клеить моделей](https://reader036.vdocuments.pub/reader036/viewer/2022081720/55a2bba71a28ab505f8b4780/html5/thumbnails/12.jpg)
Модели. Создание
12
![Page 13: Сергей Максимов — bem-mvc, или как клеить моделей](https://reader036.vdocuments.pub/reader036/viewer/2022081720/55a2bba71a28ab505f8b4780/html5/thumbnails/13.jpg)
Модели. Создание
13
![Page 14: Сергей Максимов — bem-mvc, или как клеить моделей](https://reader036.vdocuments.pub/reader036/viewer/2022081720/55a2bba71a28ab505f8b4780/html5/thumbnails/14.jpg)
Модели. Хранилище
14
![Page 15: Сергей Максимов — bem-mvc, или как клеить моделей](https://reader036.vdocuments.pub/reader036/viewer/2022081720/55a2bba71a28ab505f8b4780/html5/thumbnails/15.jpg)
Модели. Работа с полями
15
![Page 16: Сергей Максимов — bem-mvc, или как клеить моделей](https://reader036.vdocuments.pub/reader036/viewer/2022081720/55a2bba71a28ab505f8b4780/html5/thumbnails/16.jpg)
Поля модели. ТипыПростые
string
number
boolean
Составные
array
model
model-list16
![Page 17: Сергей Максимов — bem-mvc, или как клеить моделей](https://reader036.vdocuments.pub/reader036/viewer/2022081720/55a2bba71a28ab505f8b4780/html5/thumbnails/17.jpg)
Модели. События
17
![Page 18: Сергей Максимов — bem-mvc, или как клеить моделей](https://reader036.vdocuments.pub/reader036/viewer/2022081720/55a2bba71a28ab505f8b4780/html5/thumbnails/18.jpg)
i-glue
![Page 19: Сергей Максимов — bem-mvc, или как клеить моделей](https://reader036.vdocuments.pub/reader036/viewer/2022081720/55a2bba71a28ab505f8b4780/html5/thumbnails/19.jpg)
i-glue
![Page 20: Сергей Максимов — bem-mvc, или как клеить моделей](https://reader036.vdocuments.pub/reader036/viewer/2022081720/55a2bba71a28ab505f8b4780/html5/thumbnails/20.jpg)
Блок баннер
20
![Page 21: Сергей Максимов — bem-mvc, или как клеить моделей](https://reader036.vdocuments.pub/reader036/viewer/2022081720/55a2bba71a28ab505f8b4780/html5/thumbnails/21.jpg)
Биндинги. i-glue
21
![Page 22: Сергей Максимов — bem-mvc, или как клеить моделей](https://reader036.vdocuments.pub/reader036/viewer/2022081720/55a2bba71a28ab505f8b4780/html5/thumbnails/22.jpg)
Биндинги. i-glue
22
![Page 23: Сергей Максимов — bem-mvc, или как клеить моделей](https://reader036.vdocuments.pub/reader036/viewer/2022081720/55a2bba71a28ab505f8b4780/html5/thumbnails/23.jpg)
Биндинги. i-glue
23
![Page 24: Сергей Максимов — bem-mvc, или как клеить моделей](https://reader036.vdocuments.pub/reader036/viewer/2022081720/55a2bba71a28ab505f8b4780/html5/thumbnails/24.jpg)
Биндинги. model-field
24
![Page 25: Сергей Максимов — bem-mvc, или как клеить моделей](https://reader036.vdocuments.pub/reader036/viewer/2022081720/55a2bba71a28ab505f8b4780/html5/thumbnails/25.jpg)
Биндинги. model-field
25
![Page 26: Сергей Максимов — bem-mvc, или как клеить моделей](https://reader036.vdocuments.pub/reader036/viewer/2022081720/55a2bba71a28ab505f8b4780/html5/thumbnails/26.jpg)
Биндинги. model-field
26
![Page 27: Сергей Максимов — bem-mvc, или как клеить моделей](https://reader036.vdocuments.pub/reader036/viewer/2022081720/55a2bba71a28ab505f8b4780/html5/thumbnails/27.jpg)
Биндинги. Типы model-field
Контролы
input
select
checkbox
View
inline
mod
27
![Page 28: Сергей Максимов — bem-mvc, или как клеить моделей](https://reader036.vdocuments.pub/reader036/viewer/2022081720/55a2bba71a28ab505f8b4780/html5/thumbnails/28.jpg)
Биндинги. Почему не data-атрибуты?
28
Примиксованные блоки позволяют
Не обходить весь DOM
Работать с биндингом, как с i-bem блоком
Просто создавать собственные
![Page 29: Сергей Максимов — bem-mvc, или как клеить моделей](https://reader036.vdocuments.pub/reader036/viewer/2022081720/55a2bba71a28ab505f8b4780/html5/thumbnails/29.jpg)
DEMO
![Page 32: Сергей Максимов — bem-mvc, или как клеить моделей](https://reader036.vdocuments.pub/reader036/viewer/2022081720/55a2bba71a28ab505f8b4780/html5/thumbnails/32.jpg)
Спасибо