bem-site / bem-forum-content-ru

Content BEM forum for Russian speak users
MIT License
56 stars 6 forks source link

Привязка на событие в элементе вновь созданного блока. #962

Open beergreezen opened 8 years ago

beergreezen commented 8 years ago

Делаю вроде простую вещь, но "что-то идет не так".

Хочу, чтобы при нажатии на кнопку "Добавить ещё один адрес" через bemhtml вставлялся такой же блок .address-wrap. Он вставляется, но не понимаю, как сделать так, чтобы на кнопке вновь созданного блока висело событие на создание очередного.

Ниже примеры кода для bemjson, js, deps

часть bemjson

                                      {
                                            block: 'address-wrap',
                                            js: true,
                                            content: [
                                                {
                                                    block: 'content',
                                                    elem: 'title',
                                                    elemMods: { size: 'xs', countable: true },
                                                    count: '3.',
                                                    content: 'Укажите адрес вашего офиса'
                                                },
                                                {
                                                    block: 'form-item-v2',
                                                    mix: { block: 'row' },
                                                    content: [
                                                        {
                                                            block: 'col-md-4',
                                                            content: {
                                                                block: 'form',
                                                                elem: 'label',
                                                                content: 'Город'
                                                            }
                                                        },
                                                        {
                                                            block: 'col-md-4',
                                                            content: {
                                                                block: 'form-input',
                                                            }
                                                        }
                                                    ]
                                                },
                                                {
                                                    block: 'form-item-v2',
                                                    mods: { unerrored: true },
                                                    mix: { block: 'row' },
                                                    content: [
                                                        {
                                                            block: 'col-md-4',
                                                            content: {
                                                                block: 'form',
                                                                elem: 'label',
                                                                content: 'Улица'
                                                            }
                                                        },
                                                        {
                                                            block: 'col-md-4',
                                                            content: {
                                                                block: 'form-input',
                                                            }
                                                        }
                                                    ]
                                                },
                                                {
                                                    block: 'form-item-v2',
                                                    mods: { unerrored: true },
                                                    mix: { block: 'row' },
                                                    content: [
                                                        {
                                                            block: 'col-md-4',
                                                            content: {
                                                                block: 'form',
                                                                elem: 'label',
                                                                content: 'Дом/Корпус'
                                                            }
                                                        },
                                                        {
                                                            block: 'col-md-4',
                                                            content: {
                                                                block: 'form-input',
                                                            }
                                                        }
                                                    ]
                                                },
                                                {
                                                    block: 'form-item-v2',
                                                    mods: { unerrored: true },
                                                    mix: { block: 'row' },
                                                    content: [
                                                        {
                                                            block: 'col-md-4',
                                                            content: {
                                                                block: 'form',
                                                                elem: 'label',
                                                                content: 'Офис'
                                                            }
                                                        },
                                                        {
                                                            block: 'col-md-4',
                                                            content: {
                                                                block: 'form-input',
                                                            }
                                                        }
                                                    ]
                                                },
                                                {
                                                    block: 'form-item-v2',
                                                    mods: { unerrored: true },
                                                    mix: { block: 'row' },
                                                    content: [
                                                        {
                                                            block: 'col-md-4',
                                                            mix: { block: 'col-md-offset-4' },
                                                            content: {
                                                                block: 'btn',
                                                                mods: { size: 'm', 'full-width': true, color: 'green-transparent' },
                                                                mix: { block: 'address-wrap', elem: 'btnAdd' },
                                                                content: 'Добавить ещё один адрес'
                                                            }
                                                        }
                                                    ]
                                                }
                                            ]
                                        },

address-wrap.js

modules.define('address-wrap', ['i-bem__dom', 'BEMHTML', 'jquery'], function(provide, BEMDOM, BEMHTML, $){
    provide(BEMDOM.decl(this.name,
        {
            /* Instance methods */
            onSetMod: {
                'js': {
                    'inited': function() {
                        var that = this;
                        this.counter = 0;

                        this.bindTo('btnAdd', 'click', function (e) {

                            var bemJSON = {
                                block: 'address-wrap',
                                js: true,
                                content: [
                                    {
                                        block: 'content',
                                        elem: 'title',
                                        elemMods: { size: 'xxs'},
                                        mix: { block: 'offset', mods: { 'margin-top': 'reset' } },
                                        content: 'Укажите дополнительный адрес вашего офиса'
                                    },
                                    {
                                        block: 'form-item-v2',
                                        mix: { block: 'row' },
                                        content: [
                                            {
                                                block: 'col-md-4',
                                                content: {
                                                    block: 'form',
                                                    elem: 'label',
                                                    content: 'Город'
                                                }
                                            },
                                            {
                                                block: 'col-md-4',
                                                content: {
                                                    block: 'form-input'
                                                }
                                            }
                                        ]
                                    },
                                    {
                                        block: 'form-item-v2',
                                        mods: { unerrored: true },
                                        mix: { block: 'row' },
                                        content: [
                                            {
                                                block: 'col-md-4',
                                                content: {
                                                    block: 'form',
                                                    elem: 'label',
                                                    content: 'Улица'
                                                }
                                            },
                                            {
                                                block: 'col-md-4',
                                                content: {
                                                    block: 'form-input'
                                                }
                                            }
                                        ]
                                    },
                                    {
                                        block: 'form-item-v2',
                                        mods: { unerrored: true },
                                        mix: { block: 'row' },
                                        content: [
                                            {
                                                block: 'col-md-4',
                                                content: {
                                                    block: 'form',
                                                    elem: 'label',
                                                    content: 'Дом/Корпус'
                                                }
                                            },
                                            {
                                                block: 'col-md-4',
                                                content: {
                                                    block: 'form-input'
                                                }
                                            }
                                        ]
                                    },
                                    {
                                        block: 'form-item-v2',
                                        mods: { unerrored: true },
                                        mix: { block: 'row' },
                                        content: [
                                            {
                                                block: 'col-md-4',
                                                content: {
                                                    block: 'form',
                                                    elem: 'label',
                                                    content: 'Офис'
                                                }
                                            },
                                            {
                                                block: 'col-md-4',
                                                content: {
                                                    block: 'form-input'
                                                }
                                            }
                                        ]
                                    },
                                    {
                                        block: 'form-item-v2',
                                        mods: { unerrored: true },
                                        mix: { block: 'row' },
                                        content: [
                                            {
                                                block: 'col-md-4',
                                                mix: { block: 'col-md-offset-4' },
                                                content: {
                                                    block: 'btn',
                                                    mods: { size: 'm', 'full-width': true, color: 'green-transparent' },
                                                    content: 'Добавить ещё один адрес'
                                                }
                                            }
                                        ]
                                    }
                                ]
                            };

                            that.createAndBind(bemJSON);

                        });
                    }
                }
            },

            addAdress: function(){
                var that = this;
                console.log('add address');
                that.counter++;
            },

            delAddress: function(){
                var that = this;
                console.log('del address');
                that.counter--;
            },

            createAndBind: function(bemJSON){
                var that = this;
                BEMDOM.after(that.domElem[0], BEMHTML.apply(bemJSON));
            }
        },
        {
            /* Statics methods */
        }));
});

address-wrap.deps.js

([
    {
        mustDeps: 'i-bem',
        shouldDeps: [
            { elem: 'jquery' }
        ]
    },
    {
        tech: 'js',
        mustDeps   : [
            {
                block: 'address-wrap',
                tech: 'bemhtml'
            }
        ]
    }
])
tadatuta commented 8 years ago

@beergreezen пост удален, вопрос больше не актуален?

beergreezen commented 8 years ago

@tadatuta да, спасибо. Прошу прощения, что не сразу ответил