I slimmed down my actual code but I can't get this work. I am using knockoutjs and bootstrap with inline knockout templates. I use to just put a bunch of input's inside a div but I changed it to a table for alignment reasons. I know the property names are correct and the javascript console doesn't show any errors at all for bad variables or binding issues. I am putting the foreach in a TR tag instead of the TBODY tag because I don't know how many checkboxes I will have every time and I don't want them in rows exactly, just one TR element and a bunch of TD cells inside that one TR tag for now. How can I make this work??
<div id="Counties" class="well well-large checkbox inline">
<table class="table table-condensed">
<tbody>
<tr data-bind="foreach: { data: counties
}">
<td><input type="checkbox" data-bind="attr: { value: $data.sid }" />$data.name
</td>
</tr>
</tbody>
</table>
</div>
Here are my viewModels :
function searchVm() {
var self = this;
self.counties = ko.observableArray([]); //array of jurisItem
}
function jurisItem(name, sid) {
var self = this;
self.name = name;
self.sid = sid;
}
Edit :
I also tried this based on knockoutjs documentation and it doesn't work. I know I can do this in other ways using jquery but I would prefer knockout template syntax...
<table class="table table-condensed">
<tbody>
<tr>
<!-- ko foreach: $root.counties -->
<td>
<input type="checkbox" data-bind="attr: { value: $data.sid }" />$data.name
</td>
<!-- /ko -->
</tr>
</tbody>
</table>