bem
Version:
1 lines • 167 kB
JavaScript
({"name":"i-bem","elems":[{"name":"dom","mods":[{"name":"init","vals":[{"name":"auto","techs":[{"name":"js"}],"title":"","bemjsonDesc":""}],"title":"","bemjsonDesc":""}],"techs":[{"name":"js"},{"name":"ru.title.txt"}],"title":"Хелперы для работы с DOM-представлением","bemjsonDesc":""},{"name":"html","techs":[{"name":"bemhtml"},{"name":"ru.title.txt"}],"title":"Реализация html-представления блоков.","bemjsonDesc":""},{"name":"internal","techs":[{"name":"js"},{"name":"ru.title.txt"}],"title":"Модуль для внутренних хелперов","bemjsonDesc":""}],"techs":[{"name":"en.title.txt"},{"name":"js"},{"name":"ru.title.txt"},{"name":"ru.wiki"}],"title":"Блок-хелпер для создания других блоков","bemjsonDesc":{"block":"b-text","content":[{"elem":"p","content":["Блок ",{"tag":"tt","content":["i-bem"]}," - это блок-хелпер, позволяющий создавать другие блоки. Блок реализован в технологиях ",{"tag":"tt","content":["bemhtml"]}," и ",{"tag":"tt","content":["js"]},". Обе эти реализации являются ядром библиотеки блоков в соответствующих технологиях."]},{"elem":"h2","attrs":{"id":"jsrealizaciyablokaibem"},"content":["js-реализация блока i-bem"]},{"elem":"p","content":["Реализация блока ",{"tag":"tt","content":["i-bem"]}," в js обеспечивает хелперы для представления блока в виде js-объекта с определёнными методами и свойствами. Это нужно, чтобы писать клиентский js в терминах БЭМ. То есть js оперирует более высоким уровнем абстрации, чем DOM-представление."]},{"elem":"p","content":["Для того, чтобы js-представление блока использовало ядро ",{"tag":"tt","content":["i-bem"]},", оно должно быть написано с соблюдением специальных правил."]},{"elem":"h4","attrs":{"id":"Chtoopisanonaetojstranice"},"content":["Что описано на этой странице?"]},{"elem":"ul","content":[{"elem":"li","content":["Какие бывают блоки",{"elem":"ul","content":[{"elem":"li","content":[{"block":"b-link","url":"#dom.blocks","content":["Блоки с DOM-представлением"]}]},{"elem":"li","content":[{"block":"b-link","url":"#abstract.blocks","content":["Блоки без DOM-представления"]}]}]}]},{"elem":"li","content":["Принципы и особенности подхода",{"elem":"ul","content":[{"elem":"li","content":[{"block":"b-link","url":"#decl","content":["Декларативный принцип"]}]},{"elem":"li","content":[{"block":"b-link","url":"#block.getting","content":["Доступ к другим блокам"]}]},{"elem":"li","content":[{"block":"b-link","url":"#mods","content":["Работа с модификаторами"]}]},{"elem":"li","content":[{"block":"b-link","url":"#customization","content":["Кастомизация блоков"]}]}]}]},{"elem":"li","content":[{"block":"b-link","url":"#creation","content":["Создание собственного bem-js блока"]}]},{"elem":"li","content":["Подробнее о понятиях",{"elem":"ul","content":[{"elem":"li","content":[{"block":"b-link","url":"#init","content":["Инициализация"]}]},{"elem":"li","content":[{"block":"b-link","url":"#liveinit","content":["Инициализация по требованию (live-инициализация",{"tag":"span","content":[")"]}]}]},{"elem":"li","content":[{"block":"b-link","url":"#finding","content":["Методы доступа к блокам и элементам"]}]},{"elem":"li","content":[{"block":"b-link","url":"#events","content":["Работа с событиями"]}]}]}]}]},"<a name=\"dom.blocks\"></a>",{"elem":"h4","attrs":{"id":"BlokisDOMpredstavleniem"},"content":["Блоки с DOM-представлением"]},{"elem":"p","content":["Блокам, реализованным на ",{"tag":"tt","content":["bem-js"]},", могут соответствовать ноды в HTML. В этом случае говорится о том, что блоки имеют DOM-представление.",{"tag":"br"}," В HTML блоки на bem-js отличаются дополнительным css-классом ",{"tag":"tt","content":["i-bem"]}," и специальным форматом записи параметров блока в ",{"tag":"tt","content":["onclick"]},":"]},{"block":"ohl","mods":{"lang":"xml"},"content":[{"tag":"span","attrs":{"class":"ohl-name ohl-name-tag"},"content":[{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["<"]},"div"," ",{"tag":"span","attrs":{"class":"ohl-name ohl-name-attribute"},"content":["class",{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["="]},{"tag":"span","attrs":{"class":"ohl-string ohl-string-double"},"content":[{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["""]},"b-my-block i-bem",{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["""]}]}]}," ",{"tag":"span","attrs":{"class":"ohl-name ohl-name-attribute"},"content":["onclick",{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["="]},{"tag":"span","attrs":{"class":"ohl-string ohl-string-double"},"content":[{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["""]},"return { 'b-my-block' : { name : 'b-my-block'}}",{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["""]}]}]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":[">"]}]},"\n...\n",{"tag":"span","attrs":{"class":"ohl-name ohl-name-tag"},"content":[{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["</"]},"div",{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":[">"]}]}]},{"elem":"p","content":["Ниже подробно рассказано о ",{"block":"b-link","url":"#onclick.params","content":["формате параметров в onclick"]},"."]},"<a name=\"abstract.blocks\"></a>",{"elem":"h4","attrs":{"id":"BlokibezDOMpredstavleniya"},"content":["Блоки без DOM-представления"]},{"elem":"p","content":["Технология ",{"tag":"tt","content":["bem-js"]}," позволяет также создавать блоки, не имеющие DOM-представления. Такие блоки тем не менее существуют в js в виде объектов, манипулировать ими можно так же, как и блоками с DOM-представлением."]},{"elem":"p","content":["О том, как создавать такие блоки, написано под заголовком ",{"block":"b-link","url":"#dom.decl","content":["Декларация блока"]},"."]},{"elem":"p","content":["Блоки, реализованные на ",{"tag":"tt","content":["bem-js"]},", после инициализации представлены в js объектами, имеющими свои методы. Эти методы необходимо использовать, если нужно повлиять на внешний вид или поведение блока.",{"tag":"br"}," Технология ",{"tag":"tt","content":["bem-js"]}," использует предметную область ",{"block":"b-link","url":"http://wiki.yandex-team.ru/lento4ka/bem","content":["концепции ",{"tag":"tt","content":["BEM"]}]},". Все сущности являются блоками или их элементами, управление их состояниями реализуется при помощи модификаторов.",{"tag":"br"}," Представление блока в js не обязано иметь взаимное соответствие с одной DOM-нодой. Можно разместить несколько блоков на одной DOM-ноде (это называется ",{"tag":"tt","content":["mix"]},"), а также реализовать один блок на нескольких DOM-нодах.",{"tag":"br"}," Далее блок, использующий технологию ",{"tag":"tt","content":["bem-js"]},", будет называться ",{"tag":"tt","content":["блок, реализованный на bem-js"]},", или ",{"tag":"tt","content":["bem-js-блок"]},". Примером такого блока в библиотеке может служить ",{"tag":"tt","content":["b-link"]},"."]},"<a name=\"decl\"></a>",{"elem":"h2","attrs":{"id":"Deklarativnyjprincip"},"content":["Декларативный принцип"]},{"elem":"p","content":["Важной особенностью технологии ",{"tag":"tt","content":["bem-js"]}," является декларативный принцип. Подобно работе декларативных языков программирования, js-код содержит не последовательный алгоритм работы блока, а набор действий и условий, при которых эти действия необходимо выполнять."]},{"elem":"h3","attrs":{"id":"Deklaraciyabloka"},"content":["Декларация блока"]},{"elem":"p","content":["Декларативность проявляется в объявлении того, к каким блокам или их модификациям применим код компонента:"]},{"block":"ohl","mods":{"lang":"js"},"content":[{"tag":"span","attrs":{"class":"ohl-name"},"content":["BEM"]},{"tag":"span","attrs":{"class":"ohl-operator"},"content":["."]},{"tag":"span","attrs":{"class":"ohl-name"},"content":["DOM"]},{"tag":"span","attrs":{"class":"ohl-operator"},"content":["."]},{"tag":"span","attrs":{"class":"ohl-name"},"content":["decl"]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["("]},{"tag":"span","attrs":{"class":"ohl-string ohl-string-single"},"content":[{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["'"]},"b-link",{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["'"]}]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":[","]}," ",{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["{"]},"\n",{"tag":"span","attrs":{"class":"ohl-operator"},"content":["."]},{"tag":"span","attrs":{"class":"ohl-operator"},"content":["."]},{"tag":"span","attrs":{"class":"ohl-operator"},"content":["."]}]},{"block":"ohl","mods":{"lang":"js"},"content":[{"tag":"span","attrs":{"class":"ohl-name"},"content":["BEM"]},{"tag":"span","attrs":{"class":"ohl-operator"},"content":["."]},{"tag":"span","attrs":{"class":"ohl-name"},"content":["DOM"]},{"tag":"span","attrs":{"class":"ohl-operator"},"content":["."]},{"tag":"span","attrs":{"class":"ohl-name"},"content":["decl"]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["("]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["{"]}," ",{"tag":"span","attrs":{"class":"ohl-name"},"content":["name"]}," ",{"tag":"span","attrs":{"class":"ohl-operator"},"content":[":"]}," ",{"tag":"span","attrs":{"class":"ohl-string ohl-string-single"},"content":[{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["'"]},"b-domik",{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["'"]}]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":[","]}," ",{"tag":"span","attrs":{"class":"ohl-name"},"content":["modName"]}," ",{"tag":"span","attrs":{"class":"ohl-operator"},"content":[":"]}," ",{"tag":"span","attrs":{"class":"ohl-string ohl-string-single"},"content":[{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["'"]},"type",{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["'"]}]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":[","]}," ",{"tag":"span","attrs":{"class":"ohl-name"},"content":["modVal"]}," ",{"tag":"span","attrs":{"class":"ohl-operator"},"content":[":"]}," ",{"tag":"span","attrs":{"class":"ohl-string ohl-string-single"},"content":[{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["'"]},"popup",{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["'"]}]}," ",{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["}"]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":[","]}," ",{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["{"]},"\n",{"tag":"span","attrs":{"class":"ohl-operator"},"content":["."]},{"tag":"span","attrs":{"class":"ohl-operator"},"content":["."]},{"tag":"span","attrs":{"class":"ohl-operator"},"content":["."]}]},{"elem":"p","content":[{"block":"b-link","url":"#dom.decl","content":["Подробнее о декларации блока"]}]},"<a name=\"mods.reaction\"></a>",{"elem":"h3","attrs":{"id":"Reakciyanaizmeneniemodifikatorov"},"content":["Реакция на изменение модификаторов"]},{"elem":"p","content":["Согласно концепции, состояния блока или его элементов определяются модификаторами. Поэтому, чтобы динамически изменять состояния блоков и элементов, в ",{"tag":"tt","content":["bem-js"]}," есть специальные методы для установки и снятия модификаторов."]},{"elem":"p","content":["В коде компонента можно записать, как блок или элемент должен отреагировать на изменение модификатора. Эта запись тоже декларативна.",{"tag":"br"}," Например, блок ",{"tag":"tt","content":["b-dropdowna"]}," при установке модификатора ",{"tag":"tt","content":["disabled"]}," прячет показанный попап:"]},{"block":"ohl","mods":{"lang":"js"},"content":[{"tag":"span","attrs":{"class":"ohl-name"},"content":["BEM"]},{"tag":"span","attrs":{"class":"ohl-operator"},"content":["."]},{"tag":"span","attrs":{"class":"ohl-name"},"content":["DOM"]},{"tag":"span","attrs":{"class":"ohl-operator"},"content":["."]},{"tag":"span","attrs":{"class":"ohl-name"},"content":["decl"]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["("]},{"tag":"span","attrs":{"class":"ohl-string ohl-string-single"},"content":[{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["'"]},"b-dropdowna",{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["'"]}]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":[","]}," ",{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["{"]},"\n\n ",{"tag":"span","attrs":{"class":"ohl-name"},"content":["onSetMod"]}," ",{"tag":"span","attrs":{"class":"ohl-operator"},"content":[":"]}," ",{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["{"]},"\n\n ",{"tag":"span","attrs":{"class":"ohl-string ohl-string-single"},"content":[{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["'"]},"disabled",{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["'"]}]}," ",{"tag":"span","attrs":{"class":"ohl-operator"},"content":[":"]}," ",{"tag":"span","attrs":{"class":"ohl-keyword ohl-keyword-declaration"},"content":["function"]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["("]},{"tag":"span","attrs":{"class":"ohl-name"},"content":["modName"]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":[","]}," ",{"tag":"span","attrs":{"class":"ohl-name"},"content":["modVal"]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":[")"]}," ",{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["{"]},"\n\n ",{"tag":"span","attrs":{"class":"ohl-keyword"},"content":["this"]},{"tag":"span","attrs":{"class":"ohl-operator"},"content":["."]},{"tag":"span","attrs":{"class":"ohl-name"},"content":["_getSwitcher"]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["("]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":[")"]},{"tag":"span","attrs":{"class":"ohl-operator"},"content":["."]},{"tag":"span","attrs":{"class":"ohl-name"},"content":["setMod"]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["("]},{"tag":"span","attrs":{"class":"ohl-name"},"content":["modName"]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":[","]}," ",{"tag":"span","attrs":{"class":"ohl-name"},"content":["modVal"]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":[")"]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":[";"]},"\n ",{"tag":"span","attrs":{"class":"ohl-name"},"content":["modVal"]}," ",{"tag":"span","attrs":{"class":"ohl-operator"},"content":["=="]}," ",{"tag":"span","attrs":{"class":"ohl-string ohl-string-single"},"content":[{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["'"]},"yes",{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["'"]}]}," ",{"tag":"span","attrs":{"class":"ohl-operator"},"content":["&&"]}," ",{"tag":"span","attrs":{"class":"ohl-keyword"},"content":["this"]},{"tag":"span","attrs":{"class":"ohl-operator"},"content":["."]},{"tag":"span","attrs":{"class":"ohl-name"},"content":["getPopup"]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["("]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":[")"]},{"tag":"span","attrs":{"class":"ohl-operator"},"content":["."]},{"tag":"span","attrs":{"class":"ohl-name"},"content":["hide"]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["("]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":[")"]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":[";"]},"\n\n ",{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["}"]},"\n\n ",{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["}"]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":[","]},"\n",{"tag":"span","attrs":{"class":"ohl-operator"},"content":["."]},{"tag":"span","attrs":{"class":"ohl-operator"},"content":["."]},{"tag":"span","attrs":{"class":"ohl-operator"},"content":["."]}]},{"elem":"p","content":["Подробно ",{"block":"b-link","url":"#mods.callbacks","content":["о декларации обработки модификаторов"]}," рассказано в пункте про создание собственного блока."]},"<a name=\"block.getting\"></a>",{"elem":"h2","attrs":{"id":"Dostupkdrugimblokam"},"content":["Доступ к другим блокам"]},{"elem":"p","content":["Может возникнуть необходимость управлять другим блоком. Для любых манипуляций с блоком необходимо получить доступ к js-объекту этого блока и вызывать его методы."]},"<a name=\"blocks.finding\"></a>",{"elem":"h3","attrs":{"id":"Dostupkbemjsblokuizdrugogobemjsbloka"},"content":["Доступ к bem-js-блоку из другого bem-js-блока."]},{"elem":"p","content":["В случае ",{"block":"b-link","url":"#creation","content":["реализации собственного кастомного блока на технологии ",{"tag":"tt","content":["bem-js"]}]},", блоку соответствует js-объект. Он наследует общие для всех блоков методы, позволяющие работать с DOM документа в терминах BEM. Среди этих методов есть методы поиска других блоков относительно текущего (",{"tag":"tt","content":["findBlock*"]},"-методы). Они возвращают js-объект искомого блока, что позволяет затем напрямую вызывать его методы.",{"tag":"br"}," ",{"tag":"b","content":["Не используйте jQuery-селекторы для поиска блоков и элементов."]}]},{"elem":"p","content":["В этом примере вызывается метод ",{"tag":"tt","content":["val()"]}," у блока ",{"tag":"tt","content":["b-form-checkbox"]},":"]},{"block":"ohl","mods":{"lang":"js"},"content":[{"tag":"span","attrs":{"class":"ohl-name"},"content":["BEM"]},{"tag":"span","attrs":{"class":"ohl-operator"},"content":["."]},{"tag":"span","attrs":{"class":"ohl-name"},"content":["DOM"]},{"tag":"span","attrs":{"class":"ohl-operator"},"content":["."]},{"tag":"span","attrs":{"class":"ohl-name"},"content":["decl"]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["("]},{"tag":"span","attrs":{"class":"ohl-string ohl-string-single"},"content":[{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["'"]},"b-checkbox-example",{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["'"]}]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":[","]}," ",{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["{"]},"\n\n ",{"tag":"span","attrs":{"class":"ohl-name"},"content":["onSetMod"]},{"tag":"span","attrs":{"class":"ohl-operator"},"content":[":"]}," ",{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["{"]},"\n ",{"tag":"span","attrs":{"class":"ohl-string ohl-string-single"},"content":[{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["'"]},"js",{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["'"]}]},{"tag":"span","attrs":{"class":"ohl-operator"},"content":[":"]}," ",{"tag":"span","attrs":{"class":"ohl-keyword ohl-keyword-declaration"},"content":["function"]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["("]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":[")"]}," ",{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["{"]},"\n ",{"tag":"span","attrs":{"class":"ohl-keyword ohl-keyword-declaration"},"content":["var"]}," ",{"tag":"span","attrs":{"class":"ohl-name"},"content":["checkbox"]}," ",{"tag":"span","attrs":{"class":"ohl-operator"},"content":["="]}," ",{"tag":"span","attrs":{"class":"ohl-keyword"},"content":["this"]},{"tag":"span","attrs":{"class":"ohl-operator"},"content":["."]},{"tag":"span","attrs":{"class":"ohl-name"},"content":["findBlockInside"]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["("]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["{"]}," ",{"tag":"span","attrs":{"class":"ohl-name"},"content":["blockName"]}," ",{"tag":"span","attrs":{"class":"ohl-operator"},"content":[":"]}," ",{"tag":"span","attrs":{"class":"ohl-string ohl-string-single"},"content":[{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["'"]},"b-form-checkbox",{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["'"]}]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":[","]}," ",{"tag":"span","attrs":{"class":"ohl-name"},"content":["modName"]}," ",{"tag":"span","attrs":{"class":"ohl-operator"},"content":[":"]}," ",{"tag":"span","attrs":{"class":"ohl-string ohl-string-single"},"content":[{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["'"]},"type",{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["'"]}]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":[","]}," ",{"tag":"span","attrs":{"class":"ohl-name"},"content":["modVal"]}," ",{"tag":"span","attrs":{"class":"ohl-operator"},"content":[":"]}," ",{"tag":"span","attrs":{"class":"ohl-string ohl-string-single"},"content":[{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["'"]},"my-checkbox",{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["'"]}]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["}"]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":[")"]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":[";"]},"\n ",{"tag":"span","attrs":{"class":"ohl-keyword"},"content":["this"]},{"tag":"span","attrs":{"class":"ohl-operator"},"content":["."]},{"tag":"span","attrs":{"class":"ohl-name"},"content":["domElem"]},{"tag":"span","attrs":{"class":"ohl-operator"},"content":["."]},{"tag":"span","attrs":{"class":"ohl-name"},"content":["append"]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["("]},{"tag":"span","attrs":{"class":"ohl-string ohl-string-single"},"content":[{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["'"]},"Значение checkbox: ",{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["'"]}]}," ",{"tag":"span","attrs":{"class":"ohl-operator"},"content":["+"]}," ",{"tag":"span","attrs":{"class":"ohl-name"},"content":["checkbox"]},{"tag":"span","attrs":{"class":"ohl-operator"},"content":["."]},{"tag":"span","attrs":{"class":"ohl-name"},"content":["val"]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["("]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":[")"]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":[")"]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":[";"]},"\n ",{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["}"]},"\n ",{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["}"]},"\n",{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["}"]},"\n",{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":[")"]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":[";"]}]},{"elem":"h3","attrs":{"id":"Dostupkbemjsblokuneizbemjsbloka"},"content":["Доступ к bem-js-блоку не из bem-js-блока"]},{"elem":"p","content":["В случае работы не из bem-js-блока, методы ",{"tag":"tt","content":["findBlock*"]}," недоступны. js-объект блока можно получить, используя метод ",{"tag":"tt","content":[".bem()"]}," jQuery-коллекции:"]},{"block":"ohl","mods":{"lang":"js"},"content":[{"tag":"span","attrs":{"class":"ohl-name"},"content":["$"]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["("]},"уникальный селектор",{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":[")"]},{"tag":"span","attrs":{"class":"ohl-operator"},"content":["."]},{"tag":"span","attrs":{"class":"ohl-name"},"content":["bem"]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["("]},{"tag":"span","attrs":{"class":"ohl-string ohl-string-single"},"content":[{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["'"]},"b-link",{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["'"]}]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":[")"]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":[";"]}]},{"elem":"p","content":["Этот способ ",{"tag":"b","content":["не рекомендован"]},". Лучшим вариантом работы с блоками, реализованными на ",{"tag":"tt","content":["i-bem"]},", является создание собственного компонента на ",{"tag":"tt","content":["i-bem"]},". Подробнее о ",{"block":"b-link","url":"#creation","content":["создании собственного bem-js-компонента"]}," написано ниже."]},"<a name=\"mods\"></a>",{"elem":"h2","attrs":{"id":"Rabotasmodifikatoramibloka"},"content":["Работа с модификаторами блока"]},{"elem":"p","content":["Модификатор задаёт блоку определённое состояние. Каждому блоку можно присвоить один или несколько модификаторов (у блока также может не быть модификаторов вообще). У модификатора есть имя и значение."]},{"elem":"p","content":["Любой перевод блока в другое состояние должен производиться при помощи установки модификатора. Например, для того, чтобы сделать чекбокс выделенным в блоке ",{"tag":"tt","content":["b-form-checkbox"]},", ему нужно установить модификатор ",{"tag":"tt","content":["checked"]}," в значение ",{"tag":"tt","content":["yes"]},".",{"tag":"br"}," На странице документации каждого блока есть список его элементов и модификаторов. Из этого списка можно однозначно определять, какие состояния блока доступны для использования."]},{"elem":"p","content":["Модификаторы нельзя устанавливать, напрямую меняя CSS-класс на соответствующей DOM-ноде. Для корректной работы js все манипуляции с модификаторами должны производиться при помощи метода-хелпера ",{"tag":"tt","content":["setMod()"]},". Также существуют методы ",{"tag":"tt","content":["hasMod()"]},", ",{"tag":"tt","content":["getMod"]},"/",{"tag":"tt","content":["getMods()"]},", ",{"tag":"tt","content":["toggleMod()"]}," и ",{"tag":"tt","content":["delMod()"]},". Сигнатуры этих методов доступны в ",{"block":"b-link","url":"/blocks/i-bem/i-bem.jsdoc.wiki","content":["референсе по BEM"]},"."]},"<a name=\"customization\"></a>",{"elem":"h2","attrs":{"id":"Izmeneniepovedeniyasushhestvuyushhixblokov"},"content":["Изменение поведения существующих блоков"]},{"elem":"p","content":["Используя ",{"tag":"tt","content":["bem-js"]},", можно переопределять и доопределять методы блока и функций реакции на изменения модификаторов. Это делается аналогично кастомизации блоков на CSS или bemhtml."]},{"elem":"h3","attrs":{"id":"Pereopredeleniepovedeniya"},"content":["Переопределение поведения"]},{"elem":"p","content":["Например, на сервисе существует необходимость модифицировать все блоки ",{"tag":"tt","content":["b-dropdowna"]}," так, чтобы они не закрывались по второму клику на псевдо-ссылку. В этом случае на уровне переопределения сервиса нужно сделать файл ",{"tag":"tt","content":["blocks/b-dropdowna/b-dropdowna.js"]},", кастомизирующий поведение блока из библиотеки:"]},{"block":"ohl","mods":{"lang":"js"},"content":[{"tag":"span","attrs":{"class":"ohl-name"},"content":["BEM"]},{"tag":"span","attrs":{"class":"ohl-operator"},"content":["."]},{"tag":"span","attrs":{"class":"ohl-name"},"content":["DOM"]},{"tag":"span","attrs":{"class":"ohl-operator"},"content":["."]},{"tag":"span","attrs":{"class":"ohl-name"},"content":["decl"]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["("]},{"tag":"span","attrs":{"class":"ohl-string ohl-string-single"},"content":[{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["'"]},"b-dropdowna",{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["'"]}]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":[","]}," ",{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["{"]},"\n\n ",{"tag":"span","attrs":{"class":"ohl-name"},"content":["onSetMod"]}," ",{"tag":"span","attrs":{"class":"ohl-operator"},"content":[":"]}," ",{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["{"]},"\n\n ",{"tag":"span","attrs":{"class":"ohl-string ohl-string-single"},"content":[{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["'"]},"js",{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["'"]}]}," ",{"tag":"span","attrs":{"class":"ohl-operator"},"content":[":"]}," ",{"tag":"span","attrs":{"class":"ohl-keyword ohl-keyword-declaration"},"content":["function"]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["("]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":[")"]}," ",{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["{"]},"\n\n ",{"tag":"span","attrs":{"class":"ohl-keyword"},"content":["this"]},{"tag":"span","attrs":{"class":"ohl-operator"},"content":["."]},{"tag":"span","attrs":{"class":"ohl-name"},"content":["_getSwitcher"]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["("]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":[")"]},{"tag":"span","attrs":{"class":"ohl-operator"},"content":["."]},{"tag":"span","attrs":{"class":"ohl-name"},"content":["on"]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["("]},{"tag":"span","attrs":{"class":"ohl-string ohl-string-single"},"content":[{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["'"]},"click",{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["'"]}]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":[","]}," ",{"tag":"span","attrs":{"class":"ohl-keyword"},"content":["this"]},{"tag":"span","attrs":{"class":"ohl-operator"},"content":["."]},{"tag":"span","attrs":{"class":"ohl-name"},"content":["_on"]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":[","]}," ",{"tag":"span","attrs":{"class":"ohl-keyword"},"content":["this"]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":[")"]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":[";"]},"\n\n ",{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["}"]},"\n ",{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["}"]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":[","]},"\n ",{"tag":"span","attrs":{"class":"ohl-name"},"content":["_on"]}," ",{"tag":"span","attrs":{"class":"ohl-operator"},"content":[":"]}," ",{"tag":"span","attrs":{"class":"ohl-keyword ohl-keyword-declaration"},"content":["function"]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["("]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":[")"]}," ",{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["{"]},"\n ",{"tag":"span","attrs":{"class":"ohl-keyword"},"content":["this"]},{"tag":"span","attrs":{"class":"ohl-operator"},"content":["."]},{"tag":"span","attrs":{"class":"ohl-name"},"content":["getPopup"]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["("]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":[")"]},{"tag":"span","attrs":{"class":"ohl-operator"},"content":["."]},{"tag":"span","attrs":{"class":"ohl-name"},"content":["show"]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["("]},{"tag":"span","attrs":{"class":"ohl-keyword"},"content":["this"]},{"tag":"span","attrs":{"class":"ohl-operator"},"content":["."]},{"tag":"span","attrs":{"class":"ohl-name"},"content":["elem"]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["("]},{"tag":"span","attrs":{"class":"ohl-string ohl-string-single"},"content":[{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["'"]},"switcher",{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["'"]}]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":[")"]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":[")"]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":[";"]},"\n ",{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["}"]},"\n",{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["}"]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":[")"]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":[";"]}]},{"elem":"h3","attrs":{"id":"Rasshireniepovedeniya"},"content":["Расширение поведения"]},{"elem":"p","content":["В предыдущем примере код кастомизации полностью переопределяет поведение блока. Технология ",{"tag":"tt","content":["bem-js"]}," позволяет также реализовывать "доопределение" блока. Для этого в методах кастомизирующего кода можно вызывать ",{"tag":"tt","content":["this._",{"tag":"span","content":["_"]},"base.apply()"]},", передавая в качестве аргументов ",{"tag":"tt","content":["this"]}," и ",{"tag":"tt","content":["arguments"]},". Вызов такого метода аналогичен использованию ",{"tag":"tt","content":["<xsl:apply-imports/>"]},"."]},{"elem":"p","content":["Например, можно доопределить реакцию на клик всех блоков ",{"tag":"tt","content":["b-link"]}," на проекте, так, чтобы после первого клика на псевдо-ссылку она приобретала красный цвет."]},{"elem":"p","content":["Содержание файла ",{"tag":"tt","content":["blocks/b-link/_pseudo/b-link_pseudo_yes.js"]}]},{"block":"ohl","mods":{"lang":"js"},"content":[{"tag":"span","attrs":{"class":"ohl-name"},"content":["BEM"]},{"tag":"span","attrs":{"class":"ohl-operator"},"content":["."]},{"tag":"span","attrs":{"class":"ohl-name"},"content":["DOM"]},{"tag":"span","attrs":{"class":"ohl-operator"},"content":["."]},{"tag":"span","attrs":{"class":"ohl-name"},"content":["decl"]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["("]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["{"]},{"tag":"span","attrs":{"class":"ohl-string ohl-string-single"},"content":[{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["'"]},"name",{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["'"]}]},{"tag":"span","attrs":{"class":"ohl-operator"},"content":[":"]}," ",{"tag":"span","attrs":{"class":"ohl-string ohl-string-single"},"content":[{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["'"]},"b-link",{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["'"]}]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":[","]}," ",{"tag":"span","attrs":{"class":"ohl-string ohl-string-single"},"content":[{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["'"]},"modName",{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["'"]}]},{"tag":"span","attrs":{"class":"ohl-operator"},"content":[":"]}," ",{"tag":"span","attrs":{"class":"ohl-string ohl-string-single"},"content":[{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["'"]},"pseudo",{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["'"]}]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":[","]}," ",{"tag":"span","attrs":{"class":"ohl-string ohl-string-single"},"content":[{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["'"]},"modVal",{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["'"]}]},{"tag":"span","attrs":{"class":"ohl-operator"},"content":[":"]}," ",{"tag":"span","attrs":{"class":"ohl-string ohl-string-single"},"content":[{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["'"]},"yes",{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["'"]}]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["}"]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":[","]}," ",{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["{"]},"\n ",{"tag":"span","attrs":{"class":"ohl-name"},"content":["_onClick"]}," ",{"tag":"span","attrs":{"class":"ohl-operator"},"content":[":"]}," ",{"tag":"span","attrs":{"class":"ohl-keyword ohl-keyword-declaration"},"content":["function"]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["("]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":[")"]}," ",{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["{"]},"\n ",{"tag":"span","attrs":{"class":"ohl-keyword"},"content":["this"]},"\n ",{"tag":"span","attrs":{"class":"ohl-operator"},"content":["."]},{"tag":"span","attrs":{"class":"ohl-name"},"content":["__base"]},{"tag":"span","attrs":{"class":"ohl-operator"},"content":["."]},{"tag":"span","attrs":{"class":"ohl-name"},"content":["apply"]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["("]},{"tag":"span","attrs":{"class":"ohl-keyword"},"content":["this"]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":[","]}," ",{"tag":"span","attrs":{"class":"ohl-name"},"content":["arguments"]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":[")"]}," ",{"tag":"span","attrs":{"class":"ohl-comment ohl-comment-single"},"content":[{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["//"]}," выполнить метод _onClick основного b-link"]},"\n ",{"tag":"span","attrs":{"class":"ohl-operator"},"content":["."]},{"tag":"span","attrs":{"class":"ohl-name"},"content":["setMod"]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["("]},{"tag":"span","attrs":{"class":"ohl-string ohl-string-single"},"content":[{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["'"]},"status",{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["'"]}]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":[","]}," ",{"tag":"span","attrs":{"class":"ohl-string ohl-string-single"},"content":[{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["'"]},"clicked",{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["'"]}]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":[")"]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":[";"]},"\n ",{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["}"]},"\n",{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["}"]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":[")"]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":[";"]}]},{"elem":"p","content":["Содержание файла ",{"tag":"tt","content":["blocks/b-link/_status/b-link_status_clicked.css"]}]},{"block":"ohl","mods":{"lang":"xml"},"content":[".b-link_status_clicked\n{\n color: red;\n}"]},{"elem":"h3","attrs":{"id":"Kastomizaciyasispolyzovaniemmodifikatorov"},"content":["Кастомизация с использованием модификаторов"]},{"elem":"p","content":["Предыдущие примеры кастомизации изменяют поведение ",{"tag":"i","content":["всех"]}," определенных блоков на странице. Но очень часто возникает задача кастомизации конкретного блока без влияния на поведение всех таких блоков. Согласно концепции BEM, если блок чем-то отличается от других похожих, это выражается модификатором. Так что нужно реализовывать поведение для блока с таким модификатором."]},{"elem":"p","content":["Возвращаясь к примеру про псевдо-ссылку, приобретающую красный цвет после первого клика, сделаем модификацию ",{"tag":"tt","content":["reaction_odd"]},". Псевдо-ссылка с таким модификатором приобретает красный цвет после каждого нечётного клика, а после каждого чётного возвращается к исходному цвету ."]},{"elem":"p","content":["Содержание файла ",{"tag":"tt","content":["blocks/b-link/_reaction/b-link_reaction_odd.js"]},":"]},{"block":"ohl","mods":{"lang":"js"},"content":[{"tag":"span","attrs":{"class":"ohl-name"},"content":["BEM"]},{"tag":"span","attrs":{"class":"ohl-operator"},"content":["."]},{"tag":"span","attrs":{"class":"ohl-name"},"content":["DOM"]},{"tag":"span","attrs":{"class":"ohl-operator"},"content":["."]},{"tag":"span","attrs":{"class":"ohl-name"},"content":["decl"]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["("]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["{"]},{"tag":"span","attrs":{"class":"ohl-name"},"content":["name"]}," ",{"tag":"span","attrs":{"class":"ohl-operator"},"content":[":"]}," ",{"tag":"span","attrs":{"class":"ohl-string ohl-string-single"},"content":[{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["'"]},"b-link",{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["'"]}]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":[","]}," ",{"tag":"span","attrs":{"class":"ohl-name"},"content":["modName"]}," ",{"tag":"span","attrs":{"class":"ohl-operator"},"content":[":"]}," ",{"tag":"span","attrs":{"class":"ohl-string ohl-string-single"},"content":[{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["'"]},"reaction",{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["'"]}]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":[","]}," ",{"tag":"span","attrs":{"class":"ohl-string ohl-string-single"},"content":[{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["'"]},"modVal",{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["'"]}]}," ",{"tag":"span","attrs":{"class":"ohl-operator"},"content":[":"]}," ",{"tag":"span","attrs":{"class":"ohl-string ohl-string-single"},"content":[{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["'"]},"odd",{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["'"]}]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["}"]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":[","]}," ",{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["{"]},"\n ",{"tag":"span","attrs":{"class":"ohl-name"},"content":["_onClick"]}," ",{"tag":"span","attrs":{"class":"ohl-operator"},"content":[":"]}," ",{"tag":"span","attrs":{"class":"ohl-keyword ohl-keyword-declaration"},"content":["function"]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["("]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":[")"]}," ",{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["{"]},"\n ",{"tag":"span","attrs":{"class":"ohl-keyword"},"content":["this"]},"\n ",{"tag":"span","attrs":{"class":"ohl-operator"},"content":["."]},{"tag":"span","attrs":{"class":"ohl-name"},"content":["__base"]},{"tag":"span","attrs":{"class":"ohl-operator"},"content":["."]},{"tag":"span","attrs":{"class":"ohl-name"},"content":["apply"]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["("]},{"tag":"span","attrs":{"class":"ohl-keyword"},"content":["this"]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":[","]}," ",{"tag":"span","attrs":{"class":"ohl-name"},"content":["arguments"]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":[")"]}," ",{"tag":"span","attrs":{"class":"ohl-comment ohl-comment-single"},"content":[{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["//"]}," выполнить метод _onClick основного b-link"]},"\n ",{"tag":"span","attrs":{"class":"ohl-operator"},"content":["."]},{"tag":"span","attrs":{"class":"ohl-name"},"content":["toggleMod"]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["("]},{"tag":"span","attrs":{"class":"ohl-string ohl-string-single"},"content":[{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["'"]},"status",{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["'"]}]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":[","]}," ",{"tag":"span","attrs":{"class":"ohl-string ohl-string-single"},"content":[{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["'"]},"clicked",{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["'"]}]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":[")"]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":[";"]},"\n ",{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["}"]},"\n",{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["}"]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":[")"]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":[";"]}]},"<a name=\"creation\"></a>",{"elem":"h2","attrs":{"id":"Sozdaniejskomponentadlyasobstvennogoblokailisobstvennojmodifikacii"},"content":["Создание js-компонента для собственного блока или собственной модификации"]},{"elem":"p","content":["Рекомендованным способом работы с bem-js-блоками является создание собственных bem-js-блоков (чаще всего – контейнеров), реагирующих на события других блоков страницы. Собственные ",{"tag":"tt","content":["bem-js"]},"-блоки могут вызывать методы других блоков (если нужно) и реализовывать свой функционал.",{"tag":"br"}," js-код блока принято размещать в папке блока в файле с именем, соответствующим имени блока, и расширением ",{"tag":"tt","content":[".js"]},". Если js-реализация относится не к блоку, а лишь к одной из его модификаций, можно разместить код в js-файле, соответствующем данному модификатору."]},"<a name=\"dom.decl\"></a>",{"elem":"h3","attrs":{"id":"Deklaraciyabloka"},"content":["Декларация блока"]},{"elem":"p","content":["Создание js-компонента блока сводится к его декларации с помощью специальных хелперов. Существуют два хелпера для декларации блоков: один для блоков, которые имеют ",{"tag":"tt","content":["DOM"]},"-представление, второй – для блоков, не имеющих DOM-представления (например ",{"tag":"tt","content":["i-request"]},", ",{"tag":"tt","content":["i-update-session"]},")."]},{"elem":"p","content":["В первом случае блоки декларируются с помощью ",{"tag":"tt","content":["BEM.DOM.decl"]},", во втором – с помощью ",{"tag":"tt","content":["BEM.decl"]},"."]},{"elem":"p","content":["Хелпер декларации блока принимает 3 параметра:"]},{"elem":"ol","content":[{"elem":"li","content":["Матчащий параметр",{"tag":"br"},"\n Первым параметром может быть либо строка с именем\nблока, либо хеш. Хеш кроме имени блока содержит дополнительную информацию о том, к какому\nтипу блоков применять компонент."]},{"elem":"li","content":["Методы и свойства экземляра блока",{"tag":"br"},"\n Методы и свойства, предметной областью которых является конкретный инстанс блока\n на странице. Это как ",{"block":"b-link","url":"#mods.callbacks","content":["функции обработки модификаторов"]},",\n так и ",{"block":"b-link","url":"#methods","content":["кастомные методы блока"]},"."]},{"elem":"li","content":["Статические методы и свойства",{"tag":"br"},"\n Методы и свойства, не относящиеся к конкретному инстансу блока. ",{"block":"b-link","url":"#static.methods","content":["Подробнее"]}]}]},{"elem":"p","content":["Например:"]},{"block":"ohl","mods":{"lang":"js"},"content":[{"tag":"span","attrs":{"class":"ohl-name"},"content":["BEM"]},{"tag":"span","attrs":{"class":"ohl-operator"},"content":["."]},{"tag":"span","attrs":{"class":"ohl-name"},"content":["DOM"]},{"tag":"span","attrs":{"class":"ohl-operator"},"content":["."]},{"tag":"span","attrs":{"class":"ohl-name"},"content":["decl"]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["("]},"\n ",{"tag":"span","attrs":{"class":"ohl-string ohl-string-single"},"content":[{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["'"]},"b-link",{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["'"]}]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":[","]}," ",{"tag":"span","attrs":{"class":"ohl-comment ohl-comment-single"},"content":[{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["//"]}," имя блока"]},"\n ",{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["{"]},"\n ",{"tag":"span","attrs":{"class":"ohl-comment ohl-comment-single"},"content":[{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["//"]}," методы и свойства экземпляра блока"]},"\n ",{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["}"]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":[","]},"\n ",{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["{"]},"\n ",{"tag":"span","attrs":{"class":"ohl-comment ohl-comment-single"},"content":[{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["//"]}," статические методы и свойства блока"]},"\n ",{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["}"]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":[")"]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":[";"]}]},{"elem":"p","content":["и"]},{"block":"ohl","mods":{"lang":"js"},"content":[{"tag":"span","attrs":{"class":"ohl-name"},"content":["BEM"]},{"tag":"span","attrs":{"class":"ohl-operator"},"content":["."]},{"tag":"span","attrs":{"class":"ohl-name"},"content":["decl"]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["("]},{"tag":"span","attrs":{"class":"ohl-string ohl-string-single"},"content":[{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["'"]},"i-request",{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["'"]}]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":[","]}," ",{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["{"]},"\n ",{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["{"]},"\n ",{"tag":"span","attrs":{"class":"ohl-comment ohl-comment-single"},"content":[{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["//"]}," методы и свойства экземпляра блока"]},"\n ",{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["}"]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":[","]},"\n ",{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["{"]},"\n ",{"tag":"span","attrs":{"class":"ohl-comment ohl-comment-single"},"content":[{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["//"]}," статические методы и свойства блока"]},"\n",{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["}"]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":[")"]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":[";"]}]},{"elem":"p","content":["Вместо имени блока может быть указано более сложное описание, например, информация о предке:"]},{"block":"ohl","mods":{"lang":"js"},"content":[{"tag":"span","attrs":{"class":"ohl-name"},"content":["BEM"]},{"tag":"span","attrs":{"class":"ohl-operator"},"content":["."]},{"tag":"span","attrs":{"class":"ohl-name"},"content":["decl"]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["("]},{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["{"]}," ",{"tag":"span","attrs":{"class":"ohl-name"},"content":["name"]}," ",{"tag":"span","attrs":{"class":"ohl-operator"},"content":[":"]}," ",{"tag":"span","attrs":{"class":"ohl-string ohl-string-single"},"content":[{"tag":"span","attrs":{"class":"ohl-punctuation"},"content":["'"]},"b-dataprovider",{"tag":"span","attrs":{"class":"ohl-punctuation"},"cont