Как это безобразие сделать в рамках БЭМ?

Форум /

Есть безобразный модуль, который нельзя оставлять в покое в таком виде, помогите переделать его в БЭМ вид, а то копаю документацию, но никак не могу понять, как избавиться от jquery, всё же мозг пока не отвык от него. P.S. сейчас id объявлен через data-id="1", лишь что-бы хоть как-то реализовать работу.

Структура сейчас примерно такая:

<div class="side-panel i-bem" data-bem={"side-panel":{}}>
    <div class="side-panel__item" data-id="1">
        <div class="side-panel__action-btn">content</div>
    </div>
    <div class="side-panel__item" data-id="2">
        <div class="side-panel__action-btn">content</div>
    </div>
</div>

JS такой:

modules.define('side-panel', ['i-bem__dom', 'jquery'], function(provide, BEMDOM, $) {

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

                    function getData() {
                        $.getJSON('json/eventsOnAir', function(data) {
                            var arrJson = data;

                            _this.elem('item').each(function() {
                                var idItem = $(this).data('id');

                                for (var i = 0; i < arrJson.length; i++){
                                    if (arrJson[i] == idItem){
                                        $(this).find('.side-panel__action-btn').addClass('side-panel__action-btn_show');
                                    } else {
                                        $(this).find('.side-panel__action-btn').removeClass('side-panel__action-btn_show');
                                    }
                                }
                            });
                        });
                    }
                    setInterval(getData, 3000);
                }
            }
        }
    }
));

});

8 years ago

tadatuta

А приведенный код точно работает как ожидается? Разве не будет ситуации, что в процессе обхода массива с данными кнопка сначала получит модификатор show, а потом цикл продолжится и на следующем шаге он будет снят?

Можешь приложить к вопросу пример данных?

8 years ago

Jekins

Оу, у меня в массиве был лишь всего 1 айдишник, поэтому работало нормально, но когда их больше, то да, вы правы, работает криво. А массив с данными очень прост, это просто список айдишников: [1, 7, 4]

Вот так работает:

modules.define('side-panel', ['i-bem__dom', 'jquery'], function(provide, BEMDOM, $) {

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

                    function getData() {
                        $.getJSON('json/eventsOnAir', function(data) {
                            var arrJson = data;

                            _this.delMod(_this.elem('action-btn'), 'show');

                            for (var i = 0; i < arrJson.length; i++) {

                                _this.elem('item').each(function() {
                                    var idItem = $(this).data('id');

                                    if (arrJson[i] == idItem){
                                        $(this).find('.side-panel__action-btn').addClass('side-panel__action-btn_show');
                                    }
                                });
                            };
                        });
                    }
                    setInterval(getData, 3000);
                }
            }
        }
    }
));

});

8 years ago

Jekins

Зашел с другой стороны и решил данную задачу средствами бэм, в итоге получилось вот что:

var _this = this;

function getData() {
    $.getJSON('json/eventsOnAir', function(data) {
        var arrJson = data;

        _this.delMod('active');

        for (var i = 0; i < arrJson.length; i++) {
            var thisId = _this.params.id;

            if (arrJson[i] == thisId){
                _this.setMod('active');
            }
        };
    });
}
setInterval(getData, 3000);

8 years ago

tadatuta

Так выглядит гораздо прямее 👍

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