Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Object JavaScript - Knockout foreach using nested named templates
<table data-bind="template: { name: 'product-template',
foreach: productArray, as: 'productA' }">
<script type="text/html" id="product-template">
<td data-bind="text: product"></td>
<td data-bind="text: type"></td>
<ul data-bind="template: { name: 'parts-template', foreach: parts, as: 'part' }">
<script type="text/html" id="parts-template">
<span data-bind="text: part"></span>
<span data-bind="text: productA.product"></span>
<script src="Scripts/knockout-2.2.1.debug.js"></script>
<script type="text/javascript">
function ViewModel() {
this.productArray = ko.observableArray([
{ product: "Widget", type: "Tool",
parts: ['Foo', 'Whatchmacallit' ] },
{ product: "Bolt", type: "Fastener",
parts: ['Bolt', 'Washer', 'Wingnut' ] },
{ product: "Washer", type: "Fastener", parts: ['Washer'] },
{ product: "Screwdriver", type: "Tool", parts: [] }
ko.applyBindings(new ViewModel());
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment