knockout 3 / Radio buttons

Knockout - Bootstrap Radio Buttons

by mcannon

HTML

<script src="http://knockoutjs.com/downloads/knockout-3.0.0.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
<div class="btn-group" data-toggle="buttons" data-bind="foreach: choices">
    <label class="btn btn-primary">
        <input type="radio" name="options" data-bind="value:$data.id, bsRadioChecked: $root.optionsValue"><span data-bind="text: $data.choice()"></span></label>
</div>
<br />
    <hr/>
<span data-bind="text: optionsValue"></span>

JavaScript

ko.bindingHandlers.bsRadioChecked = {
    init: function (element, valueAccessor, allBindingsAccessor,
    viewModel, bindingContext) {
        var value = valueAccessor();
        var newValueAccessor = function () {
            return {
                change: function () {
                    value(element.value);
                }
            }
        };
        ko.bindingHandlers.event.init(element, newValueAccessor,
        allBindingsAccessor, viewModel, bindingContext);
    },
    update: function (element, valueAccessor, allBindingsAccessor,
    viewModel, bindingContext) {
        if ($(element).val() == ko.unwrap(valueAccessor())) {
            $(element).closest('.btn').button('toggle');
        }
    }
}

function Choice(id, choice) {
    this.id = id;
    this.choice = ko.observable(choice);
}


var ViewModel = function () {
    this.optionsValue = ko.observable("hb"),
    this.choices = ko.observableArray([
        new Choice("hb", "Hamburger"),
        new Choice("hd", "Hot Dog"),
        new Choice("chx", "Chicken Tenders")
    ]);
};

var vm = new ViewModel();
ko.applyBindings(vm);