Knockout: Templated containerless foreach
HTML
<script type="text/html" id="new-repo-template">
<tr></tr>
<!-- ko foreach: collection -->
<tr class="row">
<td class="url-cell" data-bind="text: url"></td>
<td class="button-cell">
<button data-bind="click: $parent.removeUrl">X</button>
</td>
</tr>
<!-- /ko -->
</script>
<table>
<tbody data-bind="template: {name: 'new-repo-template',
data: {collection: myDataCollection,
removeUrl: myFunctions.removeRepo }
}">
</tbody>
</table>
<table>
<tbody data-bind="template: {name: 'new-repo-template',
data: {collection: myOtherCollection,
removeUrl: anotherRemove }
}">
</tbody>
</table>
JavaScript
var vm = {myDataCollection: [{url: "One"}, {url: "Two"}],
myFunctions: {removeRepo: function(obj){console.log('Remove ' + obj.url )}}}
vm.myOtherCollection = [{url: "1"}, {url: "2"}]
vm.anotherRemove =function(obj){console.log('Another Remove ' + obj.url )}
ko.applyBindings(vm)