EN
webtehnology
webtehnology
27 февраля 2017

Добрый день!
Есть такая конструкция:

<div class="block1">
<div  class="block1__element i-bem" data-bem='{"block1__element":{"id":1}}'>содержимое первого элемента</div>
<div  class="block1__element i-bem" data-bem='{"block1__element":{"id":2}}'>содержимое второго элемента</div>
<div  class="block1__element i-bem" data-bem='{"block1__element":{"id":3}}'>содержимое третьего элемента</div>
</div>

Возникла проблема получить параметр id у элемента достигнувшего верхней границы.На события скролла у родительского блока подписался.

Видится мне это так, но не уверен:

  • подписаться у родительского блока на изменение модификатора элемента, который можно присваивать к примеру по достижении элементом верхней границы,

  • определить высоту активного элемента(будем считать что модификатор ему присвоили как активный те он достиг верхней границы)

  • получить params.id только для элемента с активным модификатором.

Index1
Index1
27 февраля 2017

Добрый вечер, подскажите пожалуйста есть ли в стеке bem библиотека tab? Найдя ссылку на одно из библиотек: https://github.com/bem-contrib/hackaton/tree/master/common.blocks/tabs, столкнулся с такой проблемой, что переключения вроде бы и есть, но переключение срабатывает только в 1 случае (Идёт смена контента), при дальнейших дейтсвиях, появляются уже оба контента.

romamilkovic
romamilkovic
16 февраля 2016

Скопировал себе на проект эти табы https://github.com/bem-contrib/hackaton/tree/master/common.blocks/tabs

BEMJSON:

{
            block : 'tabs',
            mods : { theme : 'islands', type : 'button', size : 'm' },
            tabs : [
                {
                    title : 'First',
                    content : 'First tab content'
                },
                {
                    title : 'Second',
                    content : 'Second tab content'
                },
                {
                    title : 'Third',
                    content : 'Third tab content',
                    checked : true
                }
            ]
        }

В итоге генерируется все верно, есть radio кнопки, есть вкладки с контентом. Вкладка указанная становится активной, а вот radio кнопка нет, что нужно указать или исправить? Спасибо.

ashkalov
ashkalov
25 февраля 2017

Как быть?
Я создал один блок
basis
В блоке basis создал два модификатора
_type_header и _type_footer
И сделал я это только для того, что бы в папку блока basis положить общий фон для header и footer
Чувствую, что это в корне не верно. Но увы...правильного выхода из этой ситуации не могу найти.
Что подскажите, как поступать в таких случаях?

Index1
Index1
24 февраля 2017

Не могу понять, как правильно найти блок content.

Имеется div:

<body>
 <div class="content i-bem content_js_inited" data-bem="{&quot;content&quot;:{}}"><div class="content__wrap"></div></div>
<div class="modal modal_theme_islands modal_has-close popup i-bem modal_js_inited popup_js_inited modal_has-animation" data-bem="{&quot;modal&quot;:{},&quot;popup&quot;:{&quot;zIndexGroupLevel&quot;:20}}" role="dialog" style="z-index: 21001;" aria-hidden="true"><div class="modal__table"><div class="modal__cell"><div class="modal__content"><div class="info_modal info_modal_size_s"><div class="info_modal__content">Пароль неверный</div><div class="modal_button modal__close"><button class="button button_theme_islands button_type_app app i-bem app_js_inited button_js_inited" data-bem="{&quot;button&quot;:{},&quot;app&quot;:{&quot;controller&quot;:&quot;zfclogin&quot;,&quot;action&quot;:&quot;auth&quot;}}" role="button"><span class="button__text">Ок</span></button></div></div></div></div></div></div>
</body>

То есть, у нас вызвалось модальное окно, в нём есть метод: modal_has-close и внутри модалки, есть кнопка - button, к которой примексован блок 'app'.

При нажатии, выполняется закрытие окна и по сути, выполняется метод app:

modules.define(
    'app',
    ['i-bem__dom', 'location', 'jquery', 'control', 'CryptoJSAes'],

    function(provide, BEMDOM, location, $, Control, CryptoJSAes) {

        provide(BEMDOM.decl({ block : this.name, baseBlock : Control }, {
            onSetMod: {
                'js' : {
                    'inited' : function() {
                        this._content = this.findBlockOutside('content');
                        this.bindTo('pointerclick', this._onAppLoad);
                    }
                }
            },

            _onAppLoad: function() {
              this._content._onGetLoad({'loader' : true});
            },
        }));
    }
);

То есть, при клике на примексованный app к кнопке, выполняется функция _onAppLoad. В inited ищеться блок 'content' и выполняется функция _onGetLoad. findBlockOutside, не выполниться, в сферу того, что 'content' изнутри блока app, но изнутри app у нас modal только.
Идёт вопрос, как найти блок 'content' и выполнить исходя из найденного блока - функцию?

Index1
Index1
24 февраля 2017

Добрый день, столкнулся с такой проблемой:

Имеется блок form

<form class="form form_type_register info-modal i-bem form_js_inited info-modal_js_inited" data-bem="{&quot;form&quot;:{&quot;controller&quot;:&quot;zfclogin&quot;,&quot;action&quot;:&quot;register&quot;},&quot;info-modal&quot;:{}}">
    <div class="form__content">
        <div class="form__label">
            <div class="form__label_text">Почта:</div>
            <div class="form__label_input form__label_email">
                <span class="input input_theme_islands input_size_m input_type_text input_width_available input_has-error i-bem input_js_inited" data-bem="{&quot;input&quot;:{}}">
                    <div class="input__box">
                        <input class="input__control" name="email" autocomplete="off" type="text">
                        <span class="input__icon"></span>
                    </div>
                </span>
            </div>
        </div>
        <div class="form__label">
            <div class="form__label_text">Пароль:</div>
            <div class="form__label_input">
                <span class="input input_theme_islands input_size_m input_type_password input_width_available input_has-error i-bem input_js_inited" data-bem="{&quot;input&quot;:{}}">
                    <div class="input__box">
                        <input class="input__control" name="password" autocomplete="off" type="password">
                        <span class="input__icon"></span>
                    </div>
                </span>
            </div>
        </div>
        <div class="form__label">
            <div class="form__label_text">Повтор:</div>
            <div class="form__label_input">
                <span class="input input_theme_islands input_size_m input_type_password input_width_available input_has-error i-bem input_js_inited" data-bem="{&quot;input&quot;:{}}">
                    <div class="input__box">
                        <input class="input__control" name="passwordVerify" autocomplete="off" type="password">
                        <span class="input__icon"></span>
                    </div>
                </span>
            </div>
        </div>
        <div class="form__button">
            <button class="button button_theme_islands button_size_l button_type_submit button_view_dark button_width_available button__control i-bem" role="button" type="submit" data-bem="{&quot;button&quot;:{}}">
                <div class="button__text">Завершить</div>
            </button>
        </div>
    </div>
</form>

С набором label и input.

Так вот, на кнопку submit навешивается дейтсвие bindTo('submit') и выполнятся функция:

_onGetRegisterMethod:function() {
  var data = {"email":"error","password":"error"}
  for(var data in json) {
                    if(this.elem('label_'+data)) {
                        this.elem('label_'+data).addClass('form_error');
                    }
                }
}

То есть, в

<div class="form__label_input form__label_email">...</div>

добавляется класс form_error.
Вопрос в том, как именно в блок input, где элемент __icon добавить к примеру, текст, чтобы имеено в нужной блоке form__label_input form__label_n был добавлен текст в блок input__icon.

DjonyBastone
DjonyBastone
22 февраля 2017

Всем привет!!
Понимания схемы работы динамического сайта - нет.
Есть понимание работы динамических страниц сайта в схеме:

  • MySQL(db) -> PHP ->HTML.
    В такой схеме робот индексирует страницу как HTML.
    Предполагаю что схема выглядит так:
  • MySQL(db) -> BEMTREE -> BEMJSON -> HTML
    А как происходит при схеме по БЭМ-шаблонам? Как индексируются сайты с движком JS, вместо PHP ???
webtehnology
webtehnology
20 февраля 2017

Добрый день!
Выдается такая ошибка
Module "profit-metal": can't resolve dependence "BEMHTML"

при подключении технологии в файле js
modules.define('profit-metal', ['i-bem-dom','BEMHTML', 'jquery'], function(provide, bemDom, BEMHTML, $)

кэш чистил, пробовал такой вариант, ошибка весит.

({
    tech : 'js',
    mustDeps : [
        { tech : 'bemhtml', block : 'i-bem' }
    ]
})
elyourn
elyourn
29 ноября 2016

Здравствуйте.
Разворачиваю bem-site-engine. https://github.com/bem-archive/bem-site-engine
Столкнулся со следующе ошибкой:
[2016-11-29 18:33:54] DEBUG app.app.node.js: app initialization
[2016-11-29 18:33:54] DEBUG _type.provider_type_file.node.js: make directory backups/0
[2016-11-29 18:33:54] DEBUG _type.provider_type_file.node.js: copy file from backups/data.json to backups/0/data.json
[2016-11-29 18:33:54] ERROR model.model.node.js: Error occur while loading model ENOENT: no such file or directory, stat 'backups/data.json'
[2016-11-29 18:33:54] DEBUG app.app.node.js: starting server
[2016-11-29 18:33:54] ERROR app.app.node.js: TypeError: Cannot read property 'redirects' of undefined

Верно ли я понимаю, что надо сделать snapshot? Если да, как его сделать?
Спасибо.

vsesh
vsesh
1 декабря 2016

Привет! Я хотел вкрутить юнит тесты в проекте по инструкции https://ru.bem.info/toolbox/enb/enb-bem-specs/, но получил ошибку

Failed to start mocha: Init timeout
Unsafe JavaScript attempt to access frame with URL about:blank from frame with URL

Решил попробовать на базовом проекте (https://github.com/bem/project-stub), но получил такой же результат. Посмотрел какие файлы формируются и заметил, что в конечных файлах тестов пустые html и css файлы. Пропущена какая-то зависимость?

rol1k
rol1k
20 октября 2016

Про блок в методологии сказано: "Блок не должен влиять на свое окружение, т. е. блоку не следует задавать внешнюю геометрию (в виде отступов, границ, влияющих на размеры) и позиционирование."

Какие именно CSS свойства не следует использовать при стилизации блока?
Считается ли, что width, height, border, margin, position, float оказывают влияние на окружение?
А padding, display влияют?
Ещё свойства?

pj-media
pj-media
12 декабря 2016

Хочу верстать новый проект с именованием по БЭМ.
Как быть с готовыми jquery плагинами, например Owl carousel, который при подключении генерирует свои классы. Они будут не по БЭМ?

yodeco
yodeco
12 декабря 2016

Здравствуйте! Помогите пожалуйста разобраться с методологией БЭМ на примере. Есть HTML:

<div class="block">
<p class="block__paragraph">Some text</p>
<span class="block__fragment">Some fragment</span>
</div>

Нужно стилизовать селекторы block__paragraph и block__fragment блока block. В дизайне оба селектора имеют одинаковый цвет и подчеркивание.

Вариант 1

.block {
 color: red;
 text-decoration: underline;
}

В результате элементы block__paragraph и block__fragment УНАСЛЕДУЮТ color и text-decoration. Нужно понимать, что так как они ЭЛЕМЕНТЫ, то НЕ БУДУТ использоваться вне блока.

Вариант 2

.block__paragraph {
 color: red;
 text-decoration: underline;
}

.block__fragment {
 color: red;
 text-decoration: underline;
 }

Здесь мы просто копируем одинаковые свойства КАЖДОМУ элементу (много одинакового кода).

Скажите пожалуйста, какой вариант по методологии БЭМ верный? Может есть ссылка на ту часть документации, которая дает ответ на вопрос.

Спасибо.

kompolom
kompolom
27 мая 2015

Подскажите что почитать/посмотреть чтобы начать писать тесты на блоки. В первую очередь интересует browser.js

c1n1k
c1n1k
23 сентября 2015

Не устанавливается генератор generator-bem-stub, выводит

$ npm install -g generator-bem-stub
npm WARN deprecated CSSselect@0.4.1: the module is now available as 'css-select'
npm WARN deprecated CSSwhat@0.4.7: the module is now available as 'css-what'
C:\Users\user\AppData\Roaming\npm
├── generator-bem-stub@0.11.0
└── UNMET PEER DEPENDENCY yo@>=1.0.0

npm WARN EPEERINVALID generator-bem-stub@0.11.0 requires a peer of yo@>=1.0.0 but none was installed.

Хотя Yo установлен глобально и без ошибок.

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

Сортировка

Метки