Радиовходы с шаблонами усов - PullRequest
Новая
       4

Радиовходы с шаблонами усов

8 голосов
/ 04 марта 2012

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

Это что-то простое, и я просто что-то упускаю, или имеет "логический" аспектусы действительно мешают мне разорвать что-то простое, как радио-кнопка?

Мои данные выглядят примерно так: 

data = { gender: 'female' }

<form>
  <label><input type="radio" name="gender" value="male"> Male</label>
  <label><input type="radio" name="gender" value="female"> Female</label>
</form>

Ответы [ 2 ]

4 голосов
/ 04 марта 2012

Вы можете сделать это с помощью лямбды: 

var data = {
    gender: 'female',
    wrapped: function () {
        return function (text) {
            return text.replace('value="' + this.gender+'"', 'value="' + this.gender+'" checked');
        }
    }
};

<form>
    {{#wrapped}}
    <label><input type="radio" name="gender" value="male"> Male</label>
    <label><input type="radio" name="gender" value="female"> Female</label>
    {{/wrapped}}
</form>

Посмотрите на полный пример , который я использовал, если у вас возникли проблемы.

Обновление:

Джастин Хилман показал мне другой способ сделать это: 

<form>
<label><input type="radio" name="gender" value="male"{{#maleIsDefault}} checked{{/maleIsDefault}}>
Male</label>
<label><input type="radio" name="gender" value="female"{{#femaleIsDefault}} checked{{/femaleIsDefault}}> Female</label>
</form>

var data = {
        gender: 'female',
        maleIsDefault: function() {
            return this.gender == 'male';
        },
        femaleIsDefault: function() {
            return this.gender == 'female';
        }
};

Полный пример здесь .

1 голос
/ 14 июня 2012

Другой вариант с coffeescript (не проверено) ... 

// define radio button options in an array
genders = [
  { code: 'M', name: 'Male' }
  { code: "F", name: "Female" }
]

// flag the current object as "selected"
for g in genders
  if g.code == existingGenderValue
    g.selected = true

Затем в усах динамически генерируйте ваши кнопки на основе массива genders: 

{{#genders}}
  <label class="radio">
    <input type="radio" name="gender" value="{{code}}" {{#selected}} checked="checked" {{/selected}}>
    {{name}}
  </label>
{{/genders}}
...