{"action":"created","issue":{"url":"https://api.github.com/repos/bem/bem-forum-content-ru/issues/1119","repository_url":"https://api.github.com/repos/bem/bem-forum-content-ru","labels_url":"https://api.github.com/repos/bem/bem-forum-content-ru/issues/1119/labels{/name}","comments_url":"https://api.github.com/repos/bem/bem-forum-content-ru/issues/1119/comments","events_url":"https://api.github.com/repos/bem/bem-forum-content-ru/issues/1119/events","html_url":"https://github.com/bem/bem-forum-content-ru/issues/1119","id":176015322,"number":1119,"title":"Demo: bem-xjst v8.x RC","user":{"login":"miripiruni","id":144537,"avatar_url":"https://avatars.githubusercontent.com/u/144537?v=3","gravatar_id":"","url":"https://api.github.com/users/miripiruni","html_url":"https://github.com/miripiruni","followers_url":"https://api.github.com/users/miripiruni/followers","following_url":"https://api.github.com/users/miripiruni/following{/other_user}","gists_url":"https://api.github.com/users/miripiruni/gists{/gist_id}","starred_url":"https://api.github.com/users/miripiruni/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/miripiruni/subscriptions","organizations_url":"https://api.github.com/users/miripiruni/orgs","repos_url":"https://api.github.com/users/miripiruni/repos","events_url":"https://api.github.com/users/miripiruni/events{/privacy}","received_events_url":"https://api.github.com/users/miripiruni/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/bem/bem-forum-content-ru/labels/bemhtml","name":"bemhtml","color":"bfe5bf"},{"url":"https://api.github.com/repos/bem/bem-forum-content-ru/labels/xjst","name":"xjst","color":"bfe5bf"}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":1,"created_at":"2016-09-09T13:53:54Z","updated_at":"2016-09-09T14:18:00Z","closed_at":null,"body":"Настоящим постом хочу продемонстрировать вам как будет выглядет API bem-xjst v8.x. Все пока на стадии RC, поэтому хочу выслушать ваше мнение по поводу всего этого.\r\n\r\n**Изменения, которые войдут в v8.x**\r\n\r\n- Все режимы теперь ведут себя одинаково: переопределяют значение из BEMJSON. _(major)_\r\n- Добавлены недостающие режимы: mods() и elemMods() для установки модификаторов. _(minor)_\r\n- Добавлены шорткаты режимов для добавления: addMix(), addAttrs(), addMods(), addElemMods(), addJs(). _(minor)_\r\n- Добавлены шорткаты для добавления content:  appendContent() и prependContent(). _(minor)_\r\n\r\n\r\nTLDR; Песочница bem-xjst v8.x RC: https://goo.gl/ZeY4xL, в которой можно попробовать все эти вкусности…\r\n\r\n\r\n## Технические подробности\r\n\r\n### 1. Все режимы теперь ведут себя одинаково: переопределяют значение из BEMJSON. (major)\r\n\r\nСейчас значение из шаблона режима `content()`, `bem()`, `cls()`, `tag()` переопределяет значение указанное в BEMJSON. Если вам нужно расширить значение из BEMJSON в шаблоне нужно использовать `applyNext()` и `this.extend()`/`concat()`.\r\n\r\nОднако режимы `mix()`, `js()`, `attrs()` сейчас расширяют значение из BEMJSON.\r\n\r\nРазное поведение режимов вносит некоторый раздрай и постоянно приходится держать в уме кто как себя ведет. \r\n\r\nВ v8.x мы привели все режимы к одинаковому явному поведению: переопределение значения из BEMJSON. Если вам нужно добавить что-либо, то теперь это можно будет сделать в явном виде — см п.3.\r\n\r\n### 2. Добавлены недостающие режимы: `mods()` и `elemMods()` для установки модификаторов. (minor)\r\n\r\nПод капотом эти режимы просто шорткаты к уже привычным всем конструкциям:\r\n\r\n```js\r\n// mods()({something: myValue})\r\ndef()(function() {\r\n    this.mods = {something: myValue};\r\n    return applyNext();\r\n});\r\n```\r\n\r\nи\r\n```js\r\n// elemMods()({something: myValue})\r\ndef()(function() {\r\n    this.elemMods = {something: myValue};\r\n    return applyNext();\r\n});\r\n```\r\n\r\n\r\nКак видно из примеров режимы `mods()` и `elemMods()` не имеют своей собственно очереди шаблонов, а добавляют шаблоны в стек к режиму `def()`.\r\n\r\nПо умолчанию `mods()` и `elemMods()` возвратят вам значения из `this.mods` и `this.elemMods` соответственно.\r\n\r\nПример:\r\n\r\n```js\r\n// BEMJSON\r\n{ block: 'b' }\r\n\r\n//Шаблоны\r\nblock('b').def()(function() {\r\n  return JSON.stringify(apply('mods'));\r\n});\r\n\r\n//Результатом будет:\r\n[]\r\n```\r\n\r\n\r\n### 3. Добавлены шорткаты режимов для добавления: addMix(), addAttrs(), addMods(), addElemMods(), addJs().\r\n\r\nТак как все режимы теперь переопределяют значение, то чтобы компенсировать необходимость писать `applyNext()` для накапливания результата были введены шорткаты для уже существующих режимов `add*()`.\r\n\r\nПод капотом `addJs()({ somekey: someval })` это\r\n\r\n```js\r\njs()(function() {\r\n  return this.extend(applyNext(), { somekey: someval });\r\n});\r\n```\r\n\r\nПод капотом `addMix()({block: 'mixed' })` это\r\n\r\n```js\r\nmix()(function() {\r\n  var res = applyNext();\r\n  if (!Array.isArray(res)) res = [ res ];\r\n  \r\n  return res.push({block: 'mixed' })\r\n})\r\n```\r\n\r\nДля остальных режимов аналогично. \r\nКак видно из примера шорткаты `add*()` не имеют своего стека шаблонов, а просто добавляют шаблон в стек соответствующего режима.\r\n\r\nИ, естественно, вы можете накапливать результат:\r\n\r\n```js\r\n// Шаблоны\r\nblock('b')(\r\n   addJs()({ a: 1 })\r\n   addJs()({ b: 2 })\r\n   addJs()({ c: 3 })\r\n);\r\n\r\n// BEMJSON\r\n{ block: 'b' }\r\n\r\n// Результат:\r\n<div class=\"b b_type_awesome i-bem\" data-bem='{\"b\":{\"a\":1,\"b\":2,\"c\":3}}'></div>\r\n```\r\n\r\n### 4. Добавлены шорткаты для добавления content: appendContent() и prependContent().\r\n\r\n```js\r\n// Шаблоны:\r\nblock('b')(\r\n    appendContent()(', templates!'),\r\n    appendContent()('!!1'),\r\n    prependContent()('(〜￣▽￣)〜 ')\r\n);\r\n\r\n// BEMJSON\r\n{ block: 'b', content: 'Hello' }\r\n\r\n// Результат:\r\n<div class=\"b\">(〜￣▽￣)〜 Hello, templates!!!1</div>\r\n```\r\n\r\n\r\nКак вы уже наверное догадались, это тоже шорткаты и они добавляют шаблоны в стек режима `content()`. Пример:\r\n```js\r\n// appendContent()(', templates!') это тоже самое что и:\r\ncontent()(function() {\r\n  return [\r\n    applyNext(),\r\n    ', templates!'\r\n  ];\r\n});\r\n```"},"comment":{"url":"https://api.github.com/repos/bem/bem-forum-content-ru/issues/comments/245926073","html_url":"https://github.com/bem/bem-forum-content-ru/issues/1119#issuecomment-245926073","issue_url":"https://api.github.com/repos/bem/bem-forum-content-ru/issues/1119","id":245926073,"user":{"login":"basilred","id":413033,"avatar_url":"https://avatars.githubusercontent.com/u/413033?v=3","gravatar_id":"","url":"https://api.github.com/users/basilred","html_url":"https://github.com/basilred","followers_url":"https://api.github.com/users/basilred/followers","following_url":"https://api.github.com/users/basilred/following{/other_user}","gists_url":"https://api.github.com/users/basilred/gists{/gist_id}","starred_url":"https://api.github.com/users/basilred/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/basilred/subscriptions","organizations_url":"https://api.github.com/users/basilred/orgs","repos_url":"https://api.github.com/users/basilred/repos","events_url":"https://api.github.com/users/basilred/events{/privacy}","received_events_url":"https://api.github.com/users/basilred/received_events","type":"User","site_admin":false},"created_at":"2016-09-09T14:18:00Z","updated_at":"2016-09-09T14:18:00Z","body":"Классные изменения! Спасибо. Ждём релиз."}}
{"actor":{"display_login":"basilred"}}