sslotsky/selected-bar.html

## selected-bar.html
<html>
	<head>
		<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"></script>
		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
	</head>
	<body>
		<div id="foo" class="container">
			<div data-bind="foreach: bars">
				<div class="row">
					<label>
						<input type="radio" name="selectedBar" data-bind="click: $parent.selectBar" />
						<span data-bind="text: name"></span>
					</label>
					<span data-bind="text: selectedText"></span>
				</div>
			</div>
		</div>

		<script type="text/javascript">
			var Bar = function(name) {
				this.name = ko.observable(name);
				this.isSelected = ko.observable(false);
				this.selectedText = ko.computed(function() {
					return this.isSelected() ? "Currently selected" : "";
				}, this);
			};

			var Foo = function(barNames) {
				this.bars = ko.observableArray(_.map(barNames, function(name) {
					return new Bar(name);
				}));
				this.selectBar = function(bar) {
					_.each(this.bars(), function(bar) {
						bar.isSelected(false);
					});

					bar.isSelected(true);
					return true;
				}.bind(this);
			};

			var names = ["Spo-Co", "Fieldhouse", "Sanctuary", "Gabe's"];
			var foo = new Foo(names);
			var el = document.getElementById("foo");
			ko.applyBindings(foo, el);
		</script>
	</body>
</html>
	<html>
	<head>
	<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
	</head>
	<body>
	<div id="foo" class="container">
	<div data-bind="foreach: bars">
	<div class="row">
	<label>
	<input type="radio" name="selectedBar" data-bind="click: $parent.selectBar" />
	<span data-bind="text: name"></span>
	</label>
	<span data-bind="text: selectedText"></span>
	</div>
	</div>
	</div>

	<script type="text/javascript">
	var Bar = function(name) {
	this.name = ko.observable(name);
	this.isSelected = ko.observable(false);
	this.selectedText = ko.computed(function() {
	return this.isSelected() ? "Currently selected" : "";
	}, this);
	};

	var Foo = function(barNames) {
	this.bars = ko.observableArray(_.map(barNames, function(name) {
	return new Bar(name);
	}));
	this.selectBar = function(bar) {
	_.each(this.bars(), function(bar) {
	bar.isSelected(false);
	});

	bar.isSelected(true);
	return true;
	}.bind(this);
	};

	var names = ["Spo-Co", "Fieldhouse", "Sanctuary", "Gabe's"];
	var foo = new Foo(names);
	var el = document.getElementById("foo");
	ko.applyBindings(foo, el);
	</script>
	</body>
	</html>