KnockoutJS: Input не понимает data-bind ‘checked’. Как выбрать Input radio.

Для тех кто не в курсе – KnockoutJS – это JavaScript библиотека, которая существенно упрощает работу с UI. Реализует MVVM паттерн. Довольно удобно, когда хочется отделить PHP, JavaScript и HTML друг от друга.

Проблема

Существует input[type="radio"]. Нужно сделать, чтобы по-умолчанию он был отмечен. В документации к KoJS есть следующий пример:

HTML

<p>Send me spam: <input type="checkbox" data-bind="checked: wantsSpam" /></p>
<div data-bind="visible: wantsSpam">
    Preferred flavor of spam:
    <div><input type="radio" name="flavorGroup" value="cherry" data-bind="checked: spamFlavor" /> Cherry</div>
    <div><input type="radio" name="flavorGroup" value="almond" data-bind="checked: spamFlavor" /> Almond</div>
    <div><input type="radio" name="flavorGroup" value="msg" data-bind="checked: spamFlavor" /> Monosodium Glutamate</div>
</div>

JavaScript

    var viewModel = {
        wantsSpam: ko.observable(true),
        spamFlavor: ko.observable("almond") // Initially selects only the Almond radio button
    };

    // ... then later ...
    viewModel.spamFlavor("msg"); // Now only Monosodium Glutamate is checked

Все отлично работает до тех пор пока value задано статически (value="almond"). Как только мы хотим задать значение динамически, используя атрибут data-bind, начинаются проблемы:

<input type="radio" name="flavorGroup" data-bind="checked: spamFlavor, value: flavorValue" />

Input просто не выбирается и никак не реагирует на параметр checked.

Решение

Все оказалось довольно просто. Для того, чтобы выбрать Radio Input (вероятнее всего Input Checkbox ведет себя так же) с динамически присвоенным значением достаточно присвоить значение РАНЬШЕ, чем установить флаг checked:

<input type="radio" name="flavorGroup" data-bind="value: flavorValue, checked: spamFlavor" />