Дублирование шаблона

Проблема следующая есть блоки

{
    block: 'form-input',
    name: 'user',
}

Как все понимают элемент формы input, и есть блок

{
    block: 'form-input',
    name: 'tel',
    js: true,
    mods: {type: 'tel'},
    maxlength: '13'
}

Блок с модификатором, проблема с шаблоном, сейчас у него изменился шаблон относительно других inputов, я заюзал новый шаблон, но проблема в том что при сборке этот блок собирается сначала без модификатора потом с модификатором, получается вложенность. Как избежать подобной проблемы?

block('form-input')(
    //code
);

block('form-input').mod('type', 'tel')(
  //code
);

9 years ago

tadatuta

@AndreyGladkov покажи, пожалуйста, полный код шаблонов. Скорее всего проблема именно там.

9 years ago

AndreyGladkov

@tadatuta Первый и второй соответсвенно.

block('form-input')(
    def()(function(){
        return applyCtx({
            block: 'form-input-wrapper',
            content: [
                this.ctx,
                {
                    block: 'form-input__success',
                    content: { block: 'fa fa-check'}
                }
            ]
        })
    }),
    tag()('input'),
    mix()(function(){
        return {
            block: this.ctx.error ? 'error': ''
        }
    }),
    attrs()(function(){
        return{
            type: this.ctx.type ? this.ctx.type : 'text',
            value: this.ctx.val,
            name: this.ctx.name,
            placeholder: this.ctx.placeholder,
            maxlength: this.ctx.maxlength,
            disabled: this.ctx.disabled
        }
    })
);

block('form-input').mod('type', 'tel')(
    def()(function(){
        return applyCtx({
            block: 'form-input-wrapper',
            content: [
                {
                    block: 'form-input__first-num',
                    content: '+7'
                },
                this.ctx,
                {
                    block: 'form-input__success',
                    content: { block: 'fa fa-check'}
                }
            ]
        })
    }),
    tag()('input'),
    mix()(function(){
        return {
            block: this.ctx.error ? 'error': ''
        }
    }),
    attrs()(function(){
        return{
            type: this.ctx.type ? this.ctx.type : 'text',
              value: this.ctx.val,
              name: this.ctx.name,
              placeholder: this.ctx.placeholder,
              maxlength: this.ctx.maxlength,
              disabled: this.ctx.disabled
        }
    })
);

9 years ago

tadatuta

Пока не сильно погружаясь в код, предложу отказаться от блока-обертки и продолжать считать все это блоком form-input. Тогда можно отказаться от матча по дефолтной моде и необходимости подменять контекст со вкладыванием самого себя внутрь:

block('form-input')(
    content()(function() {
        return {
            elem: 'inner',
            content: [
                applyNext(),
                {
                    elem: 'success', // block: 'form-input__success' быть не должно, если нужно задать контекст, стоит писать { block: 'form-input', elem: 'success' } 
                    content: { block: 'fa', cls: 'fa-check' } // если нужно добавить несколько классов на DOM-узел, следует использовать mix или cls, если речь не про БЭМ-сущность
                }
            ]
        };
    })
);

В целом желательно стремиться к максимально простым шаблонам без магии.

Но если такой подход по какой-то причине не подойдет — пиши. Попробую решить и исходную задачу.

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