Knockout Checkbox Binding

by dylanmac

HTML

<table class="data-list">
					<caption>Top Holdings Data Points</caption>
					<thead>
						<tr>
							<th>
								Data Point
							</th>
							<th>
								Active
							</th>
							<th>
								Visible
							</th>
						</tr>
					</thead>
					<tbody data-bind="foreach: dataPoints">
						<tr>
							<td class="label" data-bind="text: dataName"></td>
							<td>
								<input type="checkbox" data-bind="checked: isDataActive" />
							</td>
							<td>
								<input type="checkbox" data-bind="checked: isDataVisible" />
							</td>
						</tr>
					</tbody>
				</table>

<br />
<br />
View items
<table class="data-list">
		<caption>Top Holdings Data Points</caption>
		<thead>
			<tr>
				<th>
					Data Point
				</th>
				<th>
					Active
				</th>
				<th>
					Visible
				</th>
			</tr>
		</thead>
		<tbody data-bind="foreach: dataPoints">
			<tr>
				<td data-bind="text: dataName"></td>
				<td data-bind='text: isDataActive() ? "True" : "False"'></td>
				<td data-bind='text: isDataVisible() ? "True" : "False"'></td>
			</tr>
		</tbody>
	</table>

JavaScript

function viewModel() {
		var self = this;
		self.associatedItemIds = ko.observableArray();
		self.Selected = ko.observable(false);
		self.dataPoints = ko.observableArray([
			{
				'dataName' : 'ISIN',
				'isDataActive' : ko.observable(true),
				'isDataVisible' : ko.observable(false)
			},
			{
				'dataName' : 'Issue Name',
				'isDataActive' : ko.observable(true),
				'isDataVisible' : ko.observable(false)
			},
			{
				'dataName' : 'Sector Name',
				'isDataActive' : ko.observable(true),
				'isDataVisible' : ko.observable(false)
			},
			{
				'dataName' : 'Country of Risk',
				'isDataActive' : ko.observable(true),
				'isDataVisible' : ko.observable(false)
			},
			{
				'dataName' : 'Holding Percent',
				'isDataActive' : ko.observable(true),
				'isDataVisible' : ko.observable(false)
			},
			{
				'dataName' : 'Market Value',
				'isDataActive' : ko.observable(true),
				'isDataVisible' : ko.observable(false)
			},
			{
				'dataName' : 'Units Held',
				'isDataActive' : ko.observable(true),
				'isDataVisible' : ko.observable(false)
			},
			{
				'dataName' : 'Unit Price',
				'isDataActive' : ko.observable(true),
				'isDataVisible' : ko.observable(false)
			},
			{
				'dataName' : 'Exchange',
				'isDataActive' : ko.observable(true),
				'isDataVisible' : ko.observable(false)
			},
			{
				'dataName' : 'Market Currency Code',
				'isDataActive' : ko.observable(true),
				'isDataVisible' : ko.observable(false)
			},
			{
				'dataName' : 'Ticker',
				'isDataActive' : ko.observable(true),
				'isDataVisible' : ko.observable(false)
			},
			{
				'dataName' : 'Notional Value',
				'isDataActive' : ko.observable(true),
				'isDataVisible' : ko.observable(false)
			}
		]);
		self.toggleAssociation = function () {
			if (self.Selected() === true) console.log("dissociate item " + self.dataName);
			else console.log("associate item " + self.dataName);
			self.Selected(!(self.Selected()));
			return true;
		};
	};
	ko.applyBindings(new viewModel());