Привязка радиокнопки Ractive — сохранить имя

Я понимаю, что для привязки ractive переменной к радио-кнопке проще всего иметь

<input type="radio" name="{{myVar}}" value="1" checked>

в шаблоне, но фигурные скобки в имени сохраняются в html. Есть ли умный способ заставить его выводить

<input type="radio" name="myVar" value="1" checked>

в html, поэтому мне не нужно изменять обработку формы? Я пробовал некоторую логику в строках

<input type="radio" name="myVar" value="1" {{#myVar==1}}checked{{/myVar==1}}

но это не обязывает.

Кроме того, что менее важно, есть ли способ связать его как числовое значение, как если бы я

data:{myVar:1}

Тогда кнопка не проверяется?


javascript ractivejs
person Gavin Kelly    schedule 29.01.2014    source источник

Ответы (2)


arrow_upward
5
arrow_downward

Ractive добавляет фигурные скобки к входным именам для защиты от (крайне маловероятной) возможности конфликта между name='{{myVar}}' и name='myVar' — никакой другой причины. Привязка создается при отображении элемента; каким будет имя после этого, не имеет значения.

Таким образом, хотя нет никакого способа предотвратить добавление фигурных скобок в первую очередь, вы, безусловно, можете изменить их впоследствии:

ractive.findAll('input[type="radio"]').forEach( function(input) {
  input.name = input.name.replace('{{','').replace('}}','');
});

Если вы создавали компонент с помощью Ractive.extend(), например, это могло быть частью метода init().

У него не должно быть проблем с числовыми значениями, по крайней мере, в последней выпущенной версии (0.3.9) и текущая версия разработки (0.4.0 ). См. пример этой скрипты: http://jsfiddle.net/rich_harris/7qQZ8/

person Rich Harris    schedule 30.01.2014
comment
Спасибо за это - и за разработку библиотеки. Теперь я понял, что моя проблема глубже! Когда я создаю серию радиогрупп, через цикл имя «myVar» фактически изменяется на что-то вроде «{{parent.0.myVar}}». Мне придется изменить логику обработки формы, чтобы справиться с этим (или принять ваше предложение findall). Я мог бы попробовать взломать оригинал, чтобы имитировать подход с флажком - мне бы очень хотелось <input type="radio" name="realName" value="A" checked='{{myVarTakesValuesABC}}'> - Есть ли причина, по которой этот подход не использовался изначально? - person Gavin Kelly; 30.01.2014
comment
Почти готово — если я изменю метод value для CheckedBinding.prototype, чтобы он возвращал this.node.value, если узел радиотипа, то привязка работает почти так, как я хотел в моем предыдущем комментарии — но обновление означает, что интерфейс немного не синхронизирован, по крайней мере, в chrome jsfiddle - person Gavin Kelly; 30.01.2014
comment
И добавление этого в строку 3936 v0.3.9, по-видимому, позволяет правильно обновлять атрибуты checked в радиосети if (this.lcName === 'checked') { this.update = updateRadioName; return this.update(); } - person Gavin Kelly; 30.01.2014
comment
в качестве дополнительной ссылки вы всегда можете добавить <input type="hidden" name="myVar" value="{{myVar}}">, если у вас проблема в том, чтобы поддерживать соответствие с обработкой формы на стороне сервера - person ArtoAle; 29.07.2014
comment
Я использую parsleyJS для проверки формы, а фигурные скобки ломают его. Выдает синтаксическую ошибку. - person Donny V.; 20.11.2014

arrow_upward
3
arrow_downward

Краткий ответ: я не думаю, что можно делать то, что вы хотите.

Ractive обрабатывает переключатели иначе, чем простая HTML-разметка. Предполагается, что вы хотите получить, какой переключатель установлен, используя простую переменную, и для этого он использует атрибут name. В частности, ожидается, что вы установите для атрибута name одну и ту же конкретную переменную (например, "{{myVar}}") во всех переключателях в группе. Затем он автоматически установит эту переменную в атрибут value любого выбранного переключателя.

Например, если у вас есть следующий код:

    <label><input type='radio' name='{{myVar}}' value='1' checked> 1</label>
    <label><input type='radio' name='{{myVar}}' value='2'        > 2</label>
    <label><input type='radio' name='{{myVar}}' value='3'        > 3</label>
    <p>The selected value is {{myVar}}.</p>

Затем Ractive автоматически обновит <p> информацией о любом выбранном переключателе.

person Stephen Thomas    schedule 29.01.2014
comment
Спасибо за это - я довольно волновался, что это будет невозможно. Я использую его так же, как вы использовали в своем коде, и у меня был небольшой javascript, который перехватывал данные до их отправки, чтобы удалить фигурные скобки из имен полей, но хотел избавиться от взлома. Кроме того, я генерирую несколько радиоприемников через цикл, поэтому хотел бы иметь name='myVar[{{i}}]', но это не будет совместимо с тем, как Ractive связывает имя. - person Gavin Kelly; 29.01.2014
comment
@GavinKelly, будет ли этот подход работать для создания нескольких радиоприемников? jsfiddle.net/rich_harris/dg8Kd - person Rich Harris; 30.01.2014
comment
@RichHarris это работает, но проблема в том, что в каждом наборе должно быть одинаковое количество радиоприемников. У вас есть другая идея? - person BenRoe; 19.04.2014