Название модификатора

Форум /

Я хочу использовать общее название модификатора, обозначающего роль блока. Например, есть некий блок login-form, и в нём два одинаковых блока input (с ролями login и passworrd), и два блока одинаковых button (с ролями submit и register). Скрипт блока login-form будет искать внутри каждого login-form блоки input и button, и в зависимости от их роли описывать поведение.

Как назвать такой модификатор?

-input_type_login Точно не то, предполагает серьёзные различия блоков, а мой модификатор будет навешиваться даже на что-то динамически генерируемое. Например, подгрузятся несколько постов, и чтобы различать их в скрипте, будут они post_type_1245, post_type_1246.

-input_id_login Лучше, но тоже не подходит, идентификатор предполагает всё же нечто уникальное, а блоков логина может быть несколько (при условии, что они будут в разных login-form)

-input_role_login Тоже как-то странно будет видеть post_role_1247.

Может всё же есть подходящее слово? Ещё я не уверен, делать ли это модификатором, или, например, кастомным аттрибутом, но кажется, что модификатором всё же лучше.

9 years ago

tadatuta

@xdghcnt Для каждого случая подойдет свой модификтор. Для того, чтобы отличать разные посты вполне подойдет id, а для разных типов кнопки — type.

Но для изначальной задачи предложу такой вариант: оставить input-ы и button-ы вообще без модификаторов, но примиксовать к ним элементы блока form с правильными именами: form__login и form__password. Далее при необходимости обратиться к ним из блока form:

this.findBlockInside('login', 'input'); // вернет блок input, находящийся внутри элемента login данного блока

9 years ago

xdghcnt

Спасибо. По поводу микса, а если у меня будет блок some-form, внутри которого блок input-range, содержащий два блока input?

9 years ago

tadatuta

@xdghcnt Не уверен, что правильно понял вопрос, но можно делать как

{
    block: 'some-form',
    content: {
        block: 'inout-range',
        content: [
            {
                block: 'input',
                mix: { block: 'some-form', elem: 'login' }
            },
            {
                block: 'input',
                mix: { block: 'some-form', elem: 'password' }
            }
        ]
    }
}

так и

{
    block: 'some-form',
    content: {
        block: 'inout-range',
        content: [
            {
                block: 'input',
                mix: { block: 'input-range', elem: 'login' }
            },
            {
                block: 'input',
                mix: { block: 'input-range', elem: 'password' }
            }
        ]
    }
}

или даже

{
    block: 'some-form',
    content: {
        block: 'inout-range',
        content: [
            {
                block: 'input',
                mix: [{ block: 'some-form', elem: 'login' }, { block: 'input-range', elem: 'login' }]
            },
            {
                block: 'input',
                mix: [{ block: 'some-form', elem: 'login' }, { block: 'input-range', elem: 'password' }]
            }
        ]
    }
}

в зависимости от того, какой результат нужен.

9 years ago

xdghcnt

Как третий вариант, но декларация должна быть такой:

{
    block: 'some-form',
    content: {
        block: 'input-range',
        name/role/id/type: 'my-range'
    }
}

Контент определит уже шаблон блока input-range, который, например, будет таким:

[
    {
        block: 'input',
        name/role/id/type: 'min'
    },
    {
        block: 'input',
        name/role/id/type: 'max'
    }
]

Значение, переданное в name/role/id/type, я как раз хотел записать на уровне шаблона в модификатор. Ведь это только для примера он с двумя инпутами, а на деле там может быть какая-нибудь сложная форма со своим механизмом валидации. Как лучше всего это оформить, чтобы из скрипта блока some-form можно было обратиться к блоку min блока my-range? Следует для блока input-range делать какой-то интерфейс в js?

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