Skip to content

Instantly share code, notes, and snippets.

@ntodorov

ntodorov/knockoutjs_bootstrap_radiobuttons_group.html

Last active November 18, 2015 21:02
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ntodorov/686c8c37bd0161bb71c2 to your computer and use it in GitHub Desktop.
Save ntodorov/686c8c37bd0161bb71c2 to your computer and use it in GitHub Desktop.
Download ZIP
knockoutjs, bootstrap and dynamic radio buttons group
Raw
knockoutjs_bootstrap_radiobuttons_group.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>knockoutjs, bootstrap and dynamic radio buttons group - jsFiddle demo by ntodorov</title>
<script type='text/javascript' src='//code.jquery.com/jquery-2.1.3.js'></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<script type='text/javascript' src="http://knockoutjs.com/downloads/knockout-3.0.0.js"></script>
<script type='text/javascript' src="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
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 = {
items: ko.observableArray([
{ id: 1, itemName: 'Choice 1' },
{ id: 2, itemName: 'Choice 2' },
{ id: 3, itemName: 'Choice 3' },
{ id: 4, itemName: 'Choice 4' }
]),
chosenItem: ko.observable(2)
};
ko.applyBindings(viewModel);
});//]]>
</script>
</head>
<body>
<div class="btn-group" data-toggle="buttons" data-bind="foreach: items">
<label class="btn btn-primary">
<input type="radio" name="options" data-bind="checkedValue: $data.id, bsChecked: $root.chosenItem" />
<span data-bind="text: itemName"></span>
</label>
</div>
<pre data-bind="text: JSON.stringify(ko.toJS($root), null, 2)"></pre>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment