bem-mvc, или как
клеить моделей
Сергей Максимов
BEMup в рамках YaC 2013, Москва
Яндекс.Директ
Особенности
Формы с большим количеством полей
Поля формы могут зависеть друг от друга
Полем формы может быть...
i-bem, anybody?

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

M

i-model

модели, неймспейс
BEM.MODEL

V

*

любой i-bem блок

i-glue

блок “проклеивающий”
модель и
DO...
Ммм... модели
Модели. Декларация

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

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

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

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

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

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

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

17
i-glue
i-glue
Блок баннер

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

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

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

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

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

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

26
Биндинги. Типы model-field
Контролы
input
select
checkbox
View
inline
mod
27
Биндинги. Почему не data-атрибуты?

Примиксованные блоки позволяют
Не обходить весь DOM
Работать с биндингом, как с i-bem ...
DEMO
Репозиторий

github.com/bem/bem-mvc

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

31
Спасибо
Upcoming SlideShare
Loading in …5
×

Сергей Максимов — bem-mvc, или как клеить моделей

896 views
734 views

Published on

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
896
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Сергей Максимов — bem-mvc, или как клеить моделей

  1. 1. bem-mvc, или как клеить моделей Сергей Максимов BEMup в рамках YaC 2013, Москва
  2. 2. Яндекс.Директ Особенности Формы с большим количеством полей Поля формы могут зависеть друг от друга Полем формы может быть сложный элемент (другая форма) Все данные нужно валидировать 2
  3. 3. i-bem, anybody? 3
  4. 4. i-bem block
  5. 5. Еще один велосипед
  6. 6. Почему велосипед? Требования декларативность i-bem ориентированность автоматизация рутинных действий Доработка существующих решений была бы равносильна разработке собственной. 6
  7. 7. Составные части M i-model модели, неймспейс BEM.MODEL V * любой i-bem блок i-glue блок “проклеивающий” модель и DOM-представление C 7
  8. 8. Ммм... модели
  9. 9. Модели. Декларация 9
  10. 10. Модели. Декларация 10
  11. 11. Модели. Валидация 11
  12. 12. Модели. Создание 12
  13. 13. Модели. Создание 13
  14. 14. Модели. Хранилище 14
  15. 15. Модели. Работа с полями 15
  16. 16. Поля модели. Типы Простые string number boolean Составные array model model-list 16
  17. 17. Модели. События 17
  18. 18. i-glue
  19. 19. i-glue
  20. 20. Блок баннер 20
  21. 21. Биндинги. i-glue 21
  22. 22. Биндинги. i-glue 22
  23. 23. Биндинги. i-glue 23
  24. 24. Биндинги. model-field 24
  25. 25. Биндинги. model-field 25
  26. 26. Биндинги. model-field 26
  27. 27. Биндинги. Типы model-field Контролы input select checkbox View inline mod 27
  28. 28. Биндинги. Почему не data-атрибуты? Примиксованные блоки позволяют Не обходить весь DOM Работать с биндингом, как с i-bem блоком Просто создавать собственные 28
  29. 29. DEMO
  30. 30. Репозиторий github.com/bem/bem-mvc 30
  31. 31. Сергей Максимов Руководитель группы интерфейсов Справочника и Директа @dosyara ddos@yandex-team.ru 31
  32. 32. Спасибо

×