bem-components-dist. Динамическое создание select.

При добавлении select после загрузки страницы, данный select не работает.

При взаимодействии с созданным select в консоли браузера появляется ошибка:

Uncaught TypeError: Cannot read property 'setMod' of undefined.

Подключенные файлы: bem-components-dist/desktop/bem-components.css bem-components-dist/desktop/bem-components.js+bemhtml.js

JS:

modules.define('filter-form', ['i-bem__dom'], function(provide, BEMDOM) {

                provide(BEMDOM.decl(this.name, {
                    onSetMod: {
                        js: {
                            inited: function() {
                                this.findBlockInside('select').on('change', function() {
                                    var value = this.getVal();

                                    console.log(value);
                                });
                            }
                        }
                    }
                }));

            });

Подскажите пожалуйста как решить данную проблему?

8 years ago

dim2k2006

Необходимо использовать «ленивую инициализацию блока» при помощи статического метода live.

modules.define('filter-form', ['i-bem__dom'], function(provide, BEMDOM) {

                provide(BEMDOM.decl(this.name, {
                    onSetMod: {
                        js: {
                            inited: function() {
                                this.findBlockInside('select').on('change', function() {
                                    var value = this.getVal();

                                    console.log(value);
                                });
                            }
                        }
                    }
                },
                {
                    live: function() {
                        this.liveInitOnEvent('click focusin focusout');
                    }
                }
                ));

            });

https://uk.bem.info/platform/tutorials/i-bem/live-init/

8 years ago

tadatuta

Скорее всего, проблема в использовании инициализации на domready (инициализация случается до того, как успевает обработаться код про select). Правильнее использовать бандл без автоинициализации https://yastatic.net/bem-components/latest/desktop/bem-components.no-autoinit.js+bemhtml.js

Пример использования см. в https://jsfiddle.net/tadatuta/p3o8p324/

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