Динамическое добавление блоков на страницу

Форум /

Привет всем! В общем хочу динамически добавлять блоки на страницу. Использую этот пример из документации: Динамическое обновление блоков и элементов в DOM-дереве. Вот мой код:

modules.define('search-form', ['BEMHTML', 'i-bem__dom'], function(provide, BEMHTML, BEMDOM) {
    provide(BEMDOM.decl(this.name, {
            query : "",

            cities : [],

            onSetMod: {
                js: {
                    inited : function() {
                        this.findBlockInside('input').on('change', this._onChange, this);
                        BEMDOM.append(
                            this.domElem,
                            BEMHTML.apply({
                                block : 'button',
                                text : 'Кнопка'

                            })
                        );
                    }
                }
            },

            _onChange : function (event) {
                this.query = event.target._val;
                if (this.query.length < 2) return;
      },

            _filterCities : function (city) {
                return city.toLowerCase().indexOf(this.query.toLowerCase()) === 0;
            }
        },
        {}
    ));
});

Но блок просто не добавляется. Что я не так делаю? P.S. Для создания проекта использовал yoman generator

9 years ago

tadatuta

@kuflash Предположу, что дело в зависимостях. Чтобы в клиентский JS попали нужные BEMHTML-шаблоны, необходимо их явно указать в deps.js-файлах (см. https://ru.bem.info/tools/bem/bem-tools/depsjs/#Подключение-зависимостей-по-технологии).

Еще (но на работоспособность это влиять не должно) в приведенном коде стоит:

Вместо обращения к приватному полю _val использовать публичный метод getVal().
Создаваемой кнопке задать модификаторы theme и size, чтобы она могла красиво отрисоваться (и не забыть их отразить в зависимостях блока search-form.
Подписываться на изменение input-а «лениво» через

BEMDOM.blocks.input.on(this.domElem, 'change', this._onChange, this);

В методе _filterCities, кажется, что-то не так.

9 years ago

kuflash

@tadatuta я создал файл search-form.deps.js с таким содержимым:

[{
    techs : 'js',
    mustDeps : [
        {
            block : 'button',
            mods : { theme : 'islands', size : 'm' },
            tech : 'bemhtml'
        }
    ]
}]

Но это, к сожалению, не помогло. По поводу вашего код-ревью согласен. Спасибо большое за советы. С методом _filterCities все вроде порядке. В нем ищется совпадение имени города по первым символам вводимым пользователем в строку поиска.

9 years ago

tadatuta

@kuflash В приведенном коде причин не вижу, тут все хорошо. Есть возможность запушить на github весь проект?

9 years ago

kuflash

@tadatuta запушил https://github.com/kuflash/bem-weather

9 years ago

tadatuta

@kuflash https://github.com/kuflash/bem-weather/pull/1/files ;)

9 years ago

kuflash

@tadatuta спасибо огромное! ;) Блин, вот я опечатался то... Буду внимательнее впредь

Чтобы оставлять комментарии, необходимо авторизоваться.