Layout - Githubissues

Drekrosh commented 9 years ago

Привет ! Подскажите пожалуйста, в методологии есть возможность создать layout как в Jade , подключать все скрипты в теге head и для других страниц.

Guria commented 9 years ago

В методологии возможно всё. Было бы понятнее если бы вы уточнили какие инструменты вас интересуют и что именно вы хотите в итоге получить.

Drekrosh commented 9 years ago

Смотрите:

  head
         <script src="1.js"></script>
         <script src="2.js"></script>

Мне эти скрпиты нужны не только на индексной страницы , но и на других. Если я буду описывать все это в бэм json то придется и в индексной их подключить и тоже самое написать на другой страницы. Я хочу узнать , можно ли подключить один раз, но чтобы видели все страницы эти скрипты. В jade я делал просто инклуд и все. Если мне понадобится подключить jquery , а страниц у меня 15, я же не буду всем 15 станица впиливать в тег head одну и ту же строчку подключения.

qfox commented 9 years ago

@Rahnar Мы у себя решили вынести в отдельную пачку (уровень) специальные блоки типа какой-то-layout. Можете тоже сделать у себя уровень, если собираете стандартными средствами, либо префикс 'l-'. Вариантов много, как уже отметил @Guria.

qfox commented 9 years ago

@Rahnar в случае jquery — вам не нужно подключать его самому в bemjson, достаточно описать его зависимостями только у тех блоков, которые им используются.

Guria commented 9 years ago

Один из вариантов, это доопределённый блок page на уровне проекта, что-то типа:

module.exports = function(bh) {
  bh.match('page', function(ctx){
  ctx
    .param('title', 'My site')
    .param('styles', [
      { elem: 'css', url: '_index.css' },
      '<!--[if IE]>',
        { elem: 'css', url: '_index.ie.css' },
      '<![endif]-->'
    ])
    .param('scripts', [
      { elem: 'js', url: '_index.js' },
    ])
  });
  bh.match('page__head', function(ctx) {
    ctx.json()['x-ua-compatible'] = 'IE=10';
  });  
  bh.match('page__head', function(ctx, json) {
    ctx
      .applyBase()
      .content([
        json.content,
        { elem : 'meta', attrs : { rel : 'manifest', href : 'manifest.json' }},
      ], true)
  });
};

В нём же можно описать стандартный лейаут приложения или использовать лейаут реализованный отдельным блоком. Кстати page из bem-core, по-умолчанию, тянет за собой i-bem и jquery.

qfox commented 9 years ago

@Guria :+1:

А в виде

bh.match('custom-page-42', function(ctx) {
  return {
    block: 'page',
    styles: ctx.bundleName, // ?
    script: ...,
    content: [
      // тут свое кастомное
      ctx.content
      // еще футер
    ]
  };
});

Ну и еще + deps.js с используемыми блоками — не потянет?

Guria commented 9 years ago

Мне кажется потянет, ведь блок page ты в свой deps пропишешь. Не потянет, только если в noDeps указать что именно тянуть не надо. По крайней мере я так делал. Если я не прав меня поправят.

Drekrosh commented 9 years ago

Спасибо за ответы! Буду пробовать. Я только начал его изучать и многое еще не понятно. И вот последний вопрос. Где можно посмотреть пример, как создавать другие страницы в БЭМ. Если например в desktop.bundles лежит папка index и там наш index.bemjson , то я захочу создать страницу контакты , мне надо будет создавать папку в desktop.bundles с названием contact или в папке index создать файл contact.bemjson?

Guria commented 9 years ago

Надо будет создавать папку в desktop.bundles с названием contact и файлом contact.bemjson. Имейте ввиду, что bem-stub это не сервер для сайта, а "станок веб-разработчика". Как именно собирать результаты и потом отдавать в браузер вам необходимо решить самому. bem-stub эту задачу не решает.

qfox commented 9 years ago

Как наиболее простое решение через express — можно попробовать express-bem с нужными плагинами ;-)

Либо руками, как завещал @tadatuta : https://github.com/bem/project-stub/commit/fc9fb31f0f3cdc1c321bbf72562e30c7edd1b4f5

voischev commented 9 years ago

@zxqfox Допили нам функциональность у express-bem )))

qfox commented 9 years ago

@voischev Issues are welcome, PRs are even more welcome!

Drekrosh commented 9 years ago

если понимать правильно, то кучу страшных файлов мне надо будет написать самому? Как в папке index, где лежит не только index.bemjson а так же кучу других файлов с именем индекс, только для файла с именем contact.

Guria commented 9 years ago

Нет, эта куча страшных файлов в большинстве своём промежуточные результаты сборки.

qfox commented 9 years ago

@Rahnar все эти файлы генерируются из описания страницы (*.bemjson.js) или списка блоков (*.bemdecl.js) и вашей библиотеки блоков, писать нужно только файлы в самих блоках (шаблоны, стили, ...) и эти входные файлы для страниц (bemjson.js) или бандлов (bemdecl.js).

Drekrosh commented 9 years ago

Этот фрагмент уловил. Но , до сих пор не понял , что и где прописать чтобы моя папка contact , с файлом contact.bemjson могла функционировать как и index.bemjson. Тобишь , чтобы я мог описывать все и видеть результат в браузере.

qfox commented 9 years ago

Файл должен называться desktop.bundles/concact/contact.bemjson.js. Сейчас так? enb, насколько я знаю, ругается при сборке, если не может найти этот файл (впрочем, как и на пустые папки в bundles).

Если у вас enb и он не ругается — то, видимо, нужно править конфиг сборки (.enb/make.js). Что-то там с ним не так.

Drekrosh commented 9 years ago

Да это я понял изначально. Вы просто так сказали , что помимо простого создания цепочки "desktop.bundles/concact/contact.bemjson.js." , нужно еще какой-то танец с бубном сделать, чтобы это все заработало. Я про это ("собирать результаты и потом отдавать в браузер вам необходимо решить самому"). Я может что-то не так понял. Но если на этом все , то спасибо большое за разъяснение.

qfox commented 9 years ago

Тут имеется ввиду, что если вам нужна не просто статика (html, css, js), то надо будет после сборки и бандлов их заполнять динамическими данными из базы или еще откуда-то, и это загрузка этих бандлов руками — танец с бубном ;) Если это нужно — я бы предложил https://github.com/bem/bem-forum-content-ru/issues/195#issuecomment-72643966

Guria commented 9 years ago

Просто смотреть на результат сборки можно без танцев с бубном, но если нужен production вариант, то надо понимать что и где публиковать. Просто статику за nginx положить или сайт в какой то мере динамический делать.

Drekrosh commented 9 years ago

Безусловно , нужна динамика. К примеру вот: на шаблонизаторе jade , чтобы не плодить кучу тэгов li с какой-то информацией, я заношу весь контент тэгов li в файл json и потом, тупо подгружаю спец директивой jade , которая мне создает сама эти тэги li и вносит туда нужную информацию из json файла.

Guria commented 9 years ago

Для начала вам стоит понять принципиальные отличия шаблонизаторов BEMHTML/BH от jade и прочих mustache.

лучше начать с этой презентации https://events.yandex.ru/lib/talks/329/
затем изучить https://ru.bem.info/technology/bemhtml/v2/templating/ и https://ru.bem.info/technology/bemhtml/v2/rationale/

Лично у меня просветление наступило не быстро, я возвращался к статьям и документации очень много раз. Но результат того стоит.

Кстати шаблоны и BEMHTML, и BH могут исполнятся как на сервере, так и на клиенте.

В БЭМ ваш пример со списком может выглядеть так: common.blocks/my-list/my-list.bh.js

bh.match('my-list', function(ctx, json){
  ctx
    .tag('ul')
    .content(json.items.map(function(item){
      return {
        tag: 'li',
        content: item
      }
    }));
})

index.bemjson.js:

{
  block: 'my-list',
  items: ['foo', 'bar', 'baz']
}

Guria commented 9 years ago

Чтобы рендерить bemjson в приложении надо загрузить в node.js BH или BEMHTML, соответствующие шаблоны и вызывать BH.apply(bemjson_string) или BEMHTML.apply(bemjson_string). Метод развернёт строку содержащую кусок bemjson в html согласно шаблонам.

qfox commented 9 years ago

Или использовать app.render/res.render с названием бандла после подключения плагина express-bem и express-bem-bemhtml/-bh ;-)

Drekrosh commented 9 years ago

Я уже глянул ШРИ - урок по БЭМ , там все показали и разъяснили!) Спасибо, еще раз!)

bem-site / bem-forum-content-ru

Layout #195