bevis-ui / docs Goto Github PK

Есть ли (будет?) возможность быстрой компиляции проекта в статику?
Чтобы получить html-ки c правильными путями до js-ок и css-ок в удобном для выкладки виде.

К примеру есть у меня вот такая библиотека.
Создаю блок grid с технологией stylus куда её и пихаю.
Хочу подключить её к блоку example. Для этого в example.deps.yaml прописываю зависимость к блоку grid.
И вуаля, в стилях блока могу использовать mixin из библиотеки.
И мне не нужно создавать отдельный блок в технологии bt.js реализующий сетку, просто использую нужный mixin из grid к блоку example и его элементам.

К сожалению моя задумка не удалась, т.к. по всей видимости компиляция stylus происходит до того как стили склеиваются в один файл.
Думаю надо сделать наоборот :)

Что вы думаете на этот счет? Не противоречит ли это общей концепции BEViS?

Бивисный слэк, он существует :)?
https://bevis.slack.com уже существует...

В "Учебнике для новичков" есть такой пример http://prntscr.com/7sipd0
Если я правильно понял, на картинке в лого должен быть класс header__image ?

К имени блока вместо конкретного вью добавьте маску *:

Было:

module.exports = function (bt) {
bt.match('input_large', function (ctx) {
// ...
});
};
Стало:

module.exports = function (bt) {
bt.match('input*', function (ctx) {
// ...
});
};
Но при этом надо добавить маску ещё и к:

bt.match('input*__control', function (ctx) {
// ...
});
Без этого не подтягиваются стили =) И интересный баг с крестиком происходит :)

Допустим нажимаю на кнопку и появляется какой-нибудь блок.

После паузы, не сразу смог понять почему control =)

А в терминах BEViS поле формы представлено элементом блока, и имя этому элементу — control.
Перепишем методы:

getValue: function() {
    var control = this._findElement('control');
    return control.val();
},
setValue: function(value) {
    var control = this._findElement('control');
    control.val(value);
}

Возможно, text-field или что-то попроще? :)

От

var clear = this._findElement('clear');
var control = this._findElement('control');

К

this._clear = this._findElement('clear');
this._control = this._findElement('control');

Объяснить =)

Давайте отредактируем pages/test-page/test-page.page.js, чтобы у вас получилось как у меня:

module.exports = function (pages) {
    pages.declare('test-page', function (params) {
        var options = params.options;
        return {
            block: 'page',
            title: 'test page',
            styles: [
                {url: options.assetsPath + '.css'}
            ],
            scripts: [
                {url: options.assetsPath + '.js'}
            ],
            body: [
                {
                    block: 'form'
                }
            ]
        };
    });
};

По-моему нужно:

{url: options.assetsPath + '.' + params.lang + '.js'}

=) И ещё, если в input.bt.js оставить так:

bt.setDefaultView('input', 'normal');

То стили не сработают, т.к. мы не прописывали для normal стили =)

а вот, если заменить на

bt.setDefaultView('input', 'large');

то работает! :)
Ну или создать отдельный стиль для normal =-)
И почему-то блюр помимо снятия фокуса ещё и удаляет инпут вообще.

this._greetingInput.blur();

И не срабатывает последовательное disable, а потом enable. =)
Спасибо за труды! Очень круто =)

Сейчас все шаблоны склеиваются в один js файл вместе с логикой блоков что делает его достаточно тяжелым для загрузки на клиента.
Зачастую на клиенте не нужны все шаблоны блоков.
Нужны только те которые будут рендерится на нем.
Есть ли возможность как-то управлять тем какие шаблоны тянуть на front-end а какие нет?

➜  work  git clone [email protected]:bevis-ui/bevis-stub.git your-project
Cloning into 'your-project'...
Warning: Permanently added the RSA host key for IP address '192.30.252.131' to the list of known hosts.
Permission denied (publickey).
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.

UPD

с HTTP-ссылкой заработало

➜  work  git clone https://github.com/bevis-ui/bevis-stub.git bevis-project
Cloning into 'bevis-project'...
remote: Counting objects: 252, done.
remote: Total 252 (delta 0), reused 0 (delta 0), pack-reused 252
Receiving objects: 100% (252/252), 71.17 KiB | 101.00 KiB/s, done.
Resolving deltas: 100% (79/79), done.
Checking connectivity... done.

• Как написать js-поведение для блока? [*]
• Как настроить локализацию? [*]

Расскажите про статус проекта?

Я только разбираюсь в BEM/BEViS и ваш FAQ проявил действительно много деталей для меня. Но на сколько я понимаю он немного устарел, т.к. BEM не стоял на месте.
Было бы здорово увидеть свежий взгляд на сравнение BEM vs BEViS

Оказалось, что непонятно описал эту главу. @mckarty понял слова так, что не нужны никакие шаблоны, чтобы сгенерился HTML - мол только декларацию опиши в теле страницы и успех.

Дописать, что шаблоны-то нужны, что речь именно о механизмах генерации блока, а не о том, какие технологии нужны. Подумать, как описать без двойных толкований.

Сначала ещё раз спасибо =) Очень большое за то, что могу учиться по вашим урокам.

Теперь немного того, что полетело в процессе вёрстки.
Битые ссылки:
Здесь: https://github.com/bevis-ui/docs/blob/master/how-to-make/css.md в конце.

Вот, что должно было у вас получиться.

https://github.com/bevis-ui/bevis-stub/tree/input-with-styles/blocks/input

И здесь: https://github.com/bevis-ui/docs/blob/master/how-to-make/yblock.md

унаследован от YBlock, а тот в свою очередь унаследовал его от класса EventEmitter. Документацию к этому классу и к его методам для работы с событиями можно прочитать здесь.

https://github%20.com/bevis-ui/bevis-stub/blob/master/core/event-emitter/event-emitter.js

Вопросы: =)
1

_bindTo
Первый параметр — элемент или блок, на котором слушаем событие.

Никак не получается передать чистый блок, можно узнать каким образом это сделать? :)

2
Есть 3 одинаковых блока input. Допускает ли BEViS возможно по наведению на один из блоков, раскрасить все другие? Как ни стараюсь никак не могу понять, как это сделать.

this._bindTo(this._control, 'mouseover', this.hover);
this._bindTo(this._control, 'mouseout', this.nothover);

hover: function () {
                this._setState('hover');
                *МАГИЯ*
                this.emit('hover-success');
            },

            nothover: function () {
                this._removeState('hover');

Со вторым вопросом разобрался:

hover: function () {
          $('.' + ClassName.getBlockName()).addClass('_hover');
},

nothover: function () {
          $('.' + ClassName.getBlockName()).removeClass('_hover');
},

Ура! Разобрался с первым))), покопавшись в JSDoc'е =)

@example
         * var View = inherit(YBlock, {
         *     __constructor: function (model) {
         *         this.__base();
         *
         *         var hide = this._findElement('hide');
         *         this._bindTo(hide, 'click', this._onHideClick);
         *
         *         this._bindTo(model, 'change-attr', this._onAttrChange);
         *     }
         * });

Надо в конструктор передавать перменную =)

Было бы здорово также иметь английский вариант документации описывающей суть bevis подхода. Это также будет полезно для агитации этого подхода среди англоговорящих команд.

Допустим у меня есть блок кнопка, она замечательная, красивая, с богатым внутренним миром.
И я хочу вставить в страницу две такие кнопки но они будут выполнять совершенно разные задачи.
Будут ли эти кнопки одним и тем-же блоком?
Или это разные блоки с разными именами?

В БЭМ можно создать блок и примиксовать к нему другой и все стили и поведения от этого блока будут у текущего.
Но при этом блок также имеет свой внутренний мир и свое имя.

Как в bevis создавать новые, похожие блоки не копируя css и часть js от уже существующих похожих блоков?

ctx.getParam('doctype') || '<!DOCTYPE html>',

в

<!DOCTYPE html>

Я полагаю для любой строки будет происходить этот replace.
Зачем это сделано?

Хотелось бы больше услышать о функции _render() вот здесь:

А теперь мы налету будем генерить input!
Открываем blocks/form/form.js и пишем:

1. Мы удалили метод render(). Он не нужен.

Слишком быстро добавили и убрали :)
И ещё понравился правильный способ создания элементов: _createElement =)

допустим по 7 цветов для каждого размера