Knockoutjs.com - Hello World Example
http://knockoutjs.com/examples/helloWorld.html
HTML
<script src="http://knockoutjs.com/downloads/knockout-3.0.0.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" name="options" id="option1" value="1" data-bind="bsChecked: optionsValue">Option 1</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2" value="2" data-bind="bsChecked: optionsValue">Option 2</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option3" value="3" data-bind="bsChecked: optionsValue">Option 3</label>
</div>
<br />
<span data-bind="text: optionsValue"></span>
JavaScript
ko.bindingHandlers.bsChecked = {
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())) {
setTimeout(function () {
$(element).closest('.btn').button('toggle');
}, 1);
}
}
}
var ViewModel = function () {
this.optionsValue = ko.observable(2)
};
var vm = new ViewModel();
ko.applyBindings(vm);
setTimeout(function () {
vm.optionsValue(3)
}, 2000);