EN
kazakovaNet
kazakovaNet
29 марта 2017

Добрый день! Начинаю изучать БЭМ (методологию и инструменты). В процессе практики возник следующий вопрос. Как на последний элемент в наборе навесить класс.
Есть меню с пунктами. Для последнего пункта нужен класс для особого оформления. Как это сделать в шаблонизаторе разобраться не могу. Подскажите, пожалуйста!

https://jsfiddle.net/8a6j3njg/

nanervax
nanervax
18 марта 2017

Очень понравилась идея независимых блоков, но возник ряд вопросв:
1) Мне нравится Django, я хочу применять БЭМ в проектах на этом фреймворке, натыкался на пост https://ru.bem.info/forum/483/ , есть ли способы это сделать проще, уже 2017 год..
2) Непонятно, как организовать взаимодействие компонентов, типа нажал на кнопку "Купить", отреагировала корзина.. Смотрел вебинары, советуют через посредника делать, в общем блоке, но если я перенесу кнопку, и она окажется вне этого посредника, все может поломаться..
3) Куда складывать библиотеки, типа всяких jqtree и прочих? Как отдельный блок?
4) Как обстоят дела с Angular2?
5) Как сделать так, чтобы с каждой динамической страницей Django, полученной через рендер шаблона, на клиент отдавалась статика, необходимая только для действительно необходимых компонентов
Спасибо.

philipusis
philipusis
29 марта 2017

Добрый день!
Столкнулся с тем, что добавление модификатора type: 'password' никак не отражается на разметке блока.
Имею такой bemjson:

{
    block: 'input',
    mods: {width: 'available', 'has-clear': true, type: 'password'},
    name: 'password', 
    placeholder: 'Password',
    tabIndex: 2
}

На выходе получаю такой html:

<span class="input input_width_available input_has-clear input_type_password i-bem input_js_inited" data-bem="{&quot;input&quot;:{}}">
    <span class="input__box">
        <input class="input__control i-bem input__control_js_inited" name="password" tabindex="2" placeholder="Password">
    </span>
</span>

Полез смотреть в код элемента 'control' в файле input__control.bemhtml.js, и там вижу следующий код:

block('input').elem('control')(
    tag()('input'),

    addAttrs()(function() {
        var input = this._input,
            attrs = {
                id : input.id,
                name : input.name,
                value : input.val,
                maxlength : input.maxLength,
                tabindex : input.tabIndex,
                placeholder : input.placeholder
            };

        input.autocomplete === false && (attrs.autocomplete = 'off');
        this.mods.disabled && (attrs.disabled = 'disabled');

        return attrs;
    })
);

Я полагал, что код, написанный в input_type_password.bemhtml.js

block('input').mod('type', 'password').elem('control').attrs()(function() {
    return this.extend(applyNext(), { type : 'password' });
});

докинет в контекст выполнения шаблона поле 'type' со значением 'password', и это поле мы дернем в шаблоне элемента 'control' как-нибудь так:

attrs = {
    ...
    type: this.type
}

Объясните, пожалуйста, обращение к этому свойству просто забыли написать или я неправильно понимаю процесс работы шаблонизатора?
И если второе, то как мне сделать так, чтобы этот атрибут всё-таки попал в разметку?

orion1992
orion1992
26 марта 2017

Здравствуйте. В стандартной сборке bem уже есть jquery, на данный момент там версия 3.1.0. Провайдим, пользуемся, всё отлично, спасибо.
НО:
Вопрос следующего характера: как "bem-правильно" выплюнуть jquery в глоб. пространство, чтобы jquery было доступно из консоли в браузере ( сейчас ни jQuery, ни $ не видит) ?

Спасибо!

DjonyBastone
DjonyBastone
25 марта 2017

На основе project-stub создал репозиторий
Создал блок fancybox, реализация js, css.

jquery.fancybox.js подключается, с этим вопросов нет.

Но консоль выдает ошибку о неизвестном аргументе - jQuery

  • Если в bemjson.page, в теле head прописываю явно - jQuery брать с cdn, то проблем нет.
  • То есть загрузка по умолчанию добавляет jQuery в последнюю очередь, в следствии чего jQuery is not defined

По умолчанию загрузка jQuery - быстрее всего - 3-5ms
Явно - jQuery брать с cdn - 200-300ms

Вопросы:
1) Как сделать что бы fancybox работал с загрузкой jQuery которая по умолчанию. mustDeps - не помогают.
2) В чем магия со скоростью загрузки?
3) cdn Яндекс быстрее, чем cdn Гугла - это только у меня?

philipusis
philipusis
29 марта 2017

Добрый вечер!

Начал проект на свежей версии bem-core. Предыдущая была - 3.2.0, в связи с этим возникло много вопросов, и этот - самый проблемный.
У меня прекрасно ищутся элементы:

this.findChildElem({elem: 'row', modName: 'error', modVal: true})

Но вот при попытке найти аналогичным образом блок

this.findChildBlock({block: 'input', modName: 'email', modVal: true})

Мне валится ошибка: Block must be a class or description (block, modName, modVal) of the block to find.

На странице https://ru.bem.info/platform/i-bem/dom/ пример вообще достаточно странный:

modules.define('attach', ['i-bem-dom', 'button'], function(provide, bemDom, Button) {

provide(bemDom.declBlock(this.name, {
    onSetMod: {
        'js': {
            'inited' : function(modName, modVal) {
                this._button = this.findChildBlock(Button);
            }
        }
    }
}));

});

Из него вообще не понятно, как мне найти внутри блока 'attach', например, блок 'button' такого вида:

{ block: 'button', modName: 'foo', modVal: 'bar' }

Подскажите, пожалуйста, что я делаю не так?

uradvd85
uradvd85
13 марта 2017

Напишите способы упаковки и деплоя фронтенд сервера, кто и как это делает

blond
blond
29 сентября 2016

Привет, дорогой друг. Я хочу поделиться историей развития сборки в БЭМ.

Если ты из тех, кто совсем не любит читать большие тексты, то знай «Собирать проекты на БЭМ проще, чем скушать пирожок».

Заинтригован? Приходи на BEMup.

BEMup

А теперь суровые подробности.

Первый кусочек пирога

В первом подходе мы решили проверить, возможно ли собрать самый простой БЭМ проект на чём-то, кроме ENB.

Под роль самого простого проекта лучше всего подходит project-stub: один бандл, минимум зависимостей, минимум кода.

В качестве чего-то, кроме ENB, мы выбрали Gulp. Как минимум это один из самых популярных инструментов для сборки с богатой «экосистемой» плагинов. Кроме того, Gulp не является готовым инструментом в отличии от большинства конкуретнов, это фреймворк для написания своих систем сборок. Такие его особенности дают определённую гибкость.

Так появился пакет gulp-bem. Что он умеет делать? Правильно, собирать project-stub и ничего больше.

Мы тогда даже не ленились и написали постик об этом.

Гипотеза о том, что БЭМ проект можно собрать без использования ENB подтверждена. Можно скушать первый кусочек пирога.

Второй кусочек пирога и бутылка рома

Во втором подходе мы решили, что важно проверить ещё одну гипотезу. Состоит она из двух частей:

  1. Можно ли собирать реальный проект? Посложнее, чем project-stub.
  2. Можно ли собирать примеры, тесты и документаци?

gulp

Стандартные двухдневные посиделки привели нас к ряду идей.

Идея атомарного модуля для получения исходников

Модуль: gulp-bem-src.

Почти как gulp.src(), только bem.src().

Ну вы же знаете, что слово БЭМ делает любой модуль как минимум в 2 раза лучше, а тут даже в 3 раза получилось.

Идея о создании бандлов из чего угодно

Модули: gulp-bem-bundler-fs, gulp-bem-bundler-examples.

Бандлы, они как алкоголь, их можно добыть из чего угодно, даже из других бандлов.

Идея об универсальной сборке бандлов

Модуль: gulp-bem-bundle-builder.

Один раз придумали, как собирать ваш CSS и собирайте его так хоть для документации, хоть для вашей бабушки.

Хелперы

Заодно появились хелперы для сборки шаблонов: gulp-bem-xjst, gulp-bh.

В этот раз постик мы не написали. Но пирожок всё равно заслужили, правда-правда!

Пирожок SDK

Между делом появился замечательный BEM SDK — набор атомарных модулей. Каждый модуль решает одну задачу.

sdk

В третьем подходе мы делали всё, чтобы наш малыш (BEM SDK) совсем повзрослел. И кажется, ещё совсем чуть-чуть и он отправится в мир похоти и разврата (ENB в живых сервисах).

Вот только некоторые крепыши: bem-naming, bem-walk, bem-decl, bem-graph, bem-deps, bem-bundle.

Пока пирожок не заветрил

Чтобы всё произошло, осталось не так уж и много:

  1. Начать использовать BEM SDK в сервисах.
  2. Дописать недостающие хелперы для i18n, borschik, и т.д.
  3. Написать генераторы бандлов для тестов, примеров и документации.

1-2 октября мы соберёмся, чтобы совершить ещё один подход к снаряду под номером четыре.

О том, что получилось обязательно расскажем.

callpri
callpri
29 сентября 2016

Я для этого пользуюсь Коделобстером: http://www.codelobster.com

lilliputten
lilliputten
29 сентября 2016

Где-то попадалась статья (или пост), не могу сейчас найти.

Задача: "подмешать" к основному блоку функционал другого.

В простейшем варианте (то, что заработало) получается во время инициализации первого сказать примерно так:

var second_block_object = this.domElem.bem('second_block');

-- тогда имею почти то, что нужно: объект второго блока, ассоциированный с dom-узлом.

Но хотелось бы уметь указывать необходимость примеси из шаблонов и оттуда же передавать параметры второму блоку (js()({ ... })). К сожалению, через mix таким образом подцепить нужный блок не удаётся. Как это делается правильно? (Как-то ведь делается?.. Вроде бы видел даже примеры...)

o5e2e2
o5e2e2
5 октября 2016

BEMHTML.apply() всегда возвращает пустую строку. Что-то тут не так.

var BEMHTML;

(function(global) {
    function buildBemXjst(__bem_xjst_libs__) {
        var exports = {};

        exports.apply = function () { return ""; };

        return exports;
    };



    var defineAsGlobal = true;

    // Provide with CommonJS
    if (typeof module === 'object' && typeof module.exports === 'object') {
        exports['BEMHTML'] = buildBemXjst({

}
);
        defineAsGlobal = false;
    }

    // Provide to YModules
    if (typeof modules === 'object') {
        modules.define(
            'BEMHTML',
            [],
            function(
                provide

                ) {
                    provide(buildBemXjst({

}
));
                }
            );

        defineAsGlobal = false;
    }

    // Provide to global scope
    if (defineAsGlobal) {
        BEMHTML = buildBemXjst({

}
);
        global['BEMHTML'] = BEMHTML;
    }
})(typeof window !== "undefined" ? window : global || this);
DelphiAnton
DelphiAnton
6 октября 2016

В firefox анимация срабатывает только в таком виде, если на голом jquery
$('html,body').animate({scrollTop: 485}, 2000);

т.е. надо еще дополнительно получить html, в терминах бэм я легко получаю блок page

page = this.findBlockOutside('page');
 page.domElem.animate({
                       scrollTop: topOffset,
                       },{
// ...

и в хроме, сафари у меня сролл работает, но не в ff.
Как мне без подкллючения плагинов дополинтельных добраться до тэга html, чтобы на него анимацию тоже повесить?

Index1
Index1
9 октября 2016

При первом клике на кнопку, и если input пустой, то вызывается popuv рядом с input с текстом о том, что он не заполнен, но при повторной клике, popuv уже не вызывается и идут ошибки, такого рода: Uncaught TypeError: Cannot read property 'setAnchor' of null

js код:

modules.define(
    'auth',
    ['i-bem__dom', 'jquery', 'location', 'querystring'],
    function(provide, BEMDOM, $, location, qs) {

        provide(BEMDOM.decl(this.name, {
            onSetMod : {
                'js' : {
                    'inited' : function() {
                        this.__base.apply(this, arguments);
                        var _this = this;

                        this._input = this.findBlocksInside('input');

                        this.bindTo('submit', function(e) {
                            e.preventDefault();
                            _this._onSendAuth(e);
                        });
                    }
                }
            },

            _onSendAuth: function(e) {
                if (!/^([A-z0-9]{3,25})$/i.test(this._input[0].getVal())) {
                    this._dropdown = this._input[0].findBlockInside('popup');
                    this._dropdown.setAnchor(this._input[0]);
                    this._dropdown.toggleMod('visible', true);
                }
            }
        }));
    }
);

html:

<form class="auth i-bem" action="/login/auth" method="POST" data-bem="{&quot;auth&quot;:{&quot;csrf&quot;:&quot;&quot;}}">
    <div class="page-unit__login">
        <span class="input input_theme_islands input_size_m input_width_available i-bem" data-bem='{"input":{}}'><span class="input__box"><input class="input__control" placeholder="Логин"/></span>
            <div class="popup popup_target_anchor popup_autoclosable popup_theme_islands i-bem" aria-hidden="true" data-bem="{&quot;popup&quot;:{&quot;directions&quot;:[&quot;right-center&quot;]}}">Заполните поле</div>
        </span>
    </div>
    <div class="page-unit__login">
        <span class="input input_theme_islands input_size_m input_width_available i-bem" data-bem='{"input":{}}'><span class="input__box"><input class="input__control" type="password" placeholder="Пароль"/></span>
            <div class="popup popup_target_anchor popup_autoclosable popup_theme_islands i-bem" aria-hidden="true" data-bem="{&quot;popup&quot;:{&quot;directions&quot;:[&quot;right-center&quot;]}}">Заполните поле</div>
        </span>
    </div>
    <button class="button button_theme_islands button_size_m button_block_full button_type_submit button_view_action button__control i-bem" role="button" type="submit" data-bem="{&quot;button&quot;:{}}"><span class="button__text">Войти</span></button>
</form>
lilliputten
lilliputten
11 октября 2016

Не понял, как в bemhtml работает маска * для элементов (в соотв. с синтаксисом шаблонов: "...В качестве name можно использовать '*'..."). Но пробую:

block('block_name').elem('*')( /* ... */ )

-- и получается, что находятся элементы, не только принадлежащие блоку block_name. Если правильно понял, находятся вообще ВСЕ элементы.

Что-то не так понял? Что-то не так делаю?

aaMY1
aaMY1
11 октября 2016

Новичок, столкнулся с полным непониманием, вероятно плохо прочитал соответствующую документацию.

Преамбула:
имеем header, в нём форму поиска с полем и кнопкой.

Соответственно:
.header //block
.header-search //block
.header-search_input //element
.header-search_submit //element

Для .header-search задаем основные параметры:

  • width, height
  • display
  • padding
  • font
    может еще что-то опционально

Для инпута и сабмита задаем подобные параметры.

А теперь два главных животрепещущих вопроса:
1) Где указываются отступы, бордеры, цвета надписей и прочие оформительские штуки для .header-search, инпута и сабмита?
Из того, что я понял из документации, самый простой вариант: вешаем на .header-search какой-нибудь класс-модификатор, навроде ...--default, и в нем описываем все внешние данные, аналогично для инпутов.

В итоге имеем:
.header-search_input--default //modificator
.header-search_submit--default //modificator

<header class="header">

    <form class="header-search header-search--default">

        <input type="search" class="header-search_input header-search_input--default">

        <input type="submit" class="header-search_submit header-search_submit--default">

    </form>

</header>

Именно так это работает, или я что-то не понимаю?

2) Если мой вариант из вопроса 1 верен, то и изменения в контексте media-query для формы и инпутов указываются для соответствующих модификаторов:

    @media (max-width: 768px){
        .header-search--default{
            width: 100%;
        }

        .header-search_input--default{
            border: 1px solid green
        }

        .header-search_submit--default{
            font-size: 1.3em;
        }
    };

Так это работает, или я и в этом случае всё неправильно понял? :)

По данному запросу найдены посты в архиве:
Перейти в архив

Сортировка

Метки