Input Radio Button

[enter-key]

Кажется, я упустила что-то из документации по bemhtml. Хочу ответы на следующие простые вопросы:
1) как в bemhtml связать input-radio с label, когда radio не находится внутри label?
2) как определить в bemhtml input-radio и label, когда radio внутри label?
в обоих случаях radio одиночный.
Примеры видела, пост про radio (http://ru.bem.info/libs/bem-components/v2/desktop/radio/docs/) читала.

[veged]

1) если у input и label нет ничего общего, то только по id/for 2) не уверен, что правильно понял, но если input и label возникают из одного БЭМ-блока, то можно использовать this.generateId() для простановки правильных id/for (см. https://github.com/bem/bemhtml/blob/master/common.docs/reference/reference.ru.md#Связывание-html-элементов-по-id)

[enter-key]

1) то есть иных способов связать нет?
2) тут скорее вопрос, как определить этот БЭМ-блок. Не нужно связывать их между собой по id/for.

[tadatuta]

1) если правильно понял вопрос, то нет, кроме того, чтобы вложить инпут внутрь лейбла и связи по id/for, других вариантов нет. а можно еще подробнее раскрыть вопрос? скорее всего мы под «определить блок в bemhtml» понимаем что-то разное.

если речь о том, как его описать в BEMJSON, то можно как-то так:

{
    block: 'radio',
    text: 'имя метки'
}

тогда в BEMHTML:

block('radio')(
    tag()('label'),
    content()([
        {
            elem: 'input'
        },
        this.ctx.text
    ]),
    elem('input')(
        tag()('input'),
        attrs()({
            type: 'radio'
        })
    )
);

[enter-key]

спасибо)
в итоге я нашла немного другое решение.
Если подробнее, задача была такая:
В BEMJSON-декларации страницы был описан список, который содержит какие-то данные. Внутри каждого элемента этого списка должен быть radio, связанный с соответствующим label. В BEMHTML-шаблоне блока пишем код, который превратит данные в элементы блока. В итоге получилось так:

block('goods')(
    tag()('ul'),
    content()(function() {
        return this.ctx.goods.map(function(item){
            return [
                {
                    elem: 'item',
                    content: [
                        ...
                        {
                            elem: 'name',
                            content: [{
                                block : 'radio',
                                name : 'quest',
                                options : [{ val : item.num, text: item.text }]
                            }]
                        }
                    ]
                },
                ' '
            ];
        });
    }),
    elem('item')(
        tag()('li')
    ),
    ...
    elem('name')(
        tag()('span')
    )
)

[veged]

@enter-key выглядит нормально

пара нюансов по стилю:

1. вместо

    elem('item')(
        tag()('li')
    ),
    elem('name')(
        tag()('span')
    )

можно просто elem('item').tag()('li'), elem('name').tag()('span')

1. вместо content: [{ ... }] можно просто content: { ... } (без лишнего массива из одного элемента)

[voischev]

@enter-key Если я правильно понял, можно посмотреть на блок из компонентов для гругппировки radio https://github.com/bem/bem-components/tree/v2/common.blocks/radio-group

[enter-key]

@veged Спасибо за совет. Поправила

@voichev Увы ( при попытке сделать как в примере radio не "развернулся".
В .bemhtml:

                        {
                            elem: 'name',
                            content: {
                                block : 'radio',
                                name : 'quest',
                                val : item.num,
                                text: item.definition
                            }
                        }

В html radio разворачивается в span с data-bem="{"radio":{"id":"radio-quest"}}.
Рабочий вариант у меня уже есть (указан выше). Любопытно, что здесь не так.