CODEWITHSUNDEEP
javascripthtmlknockout.jsknockout-2.0
bdev
bdev

Reputation: 2058

knockoutjs foreach not working

I have two pieces of code in the same table. One looks like this:

<tr>
   <th data-bind="text: tableHeaders()[0].title"></th>
   <th data-bind="text: tableHeaders()[1].title"></th>
   <th data-bind="text: tableHeaders()[2].title"></th>
</tr>

And the other looks like this:

<tr data-bind="foreach: tableHeaders">
   <th data-bind="text: title"></th>
</tr>

The first prints out correctly, while the second does not print out anything. Looking through the source code reveals 

<tr data-bind="foreach: tableHeaders"></tr>

I've been unable to replicate my issue in jsfiddle(works: http://jsfiddle.net/nnjEf/4/), so it's obviously another issue. Any ideas how else I can troubleshoot?

Upvotes: 1

Views: 930

Answers (1)

bittenbytailfly
bittenbytailfly

Reputation: 233

The 'Control of flow bindings' (i.e. using foreach inline with your HTML) as you have done was introduced first in Knockoutjs 2.0 (or 1.3 in it's beta release name). Your jsfiddle is also using v2.0 as the framework.

It's impossible to say without seeing your actual code but my suspicion is that you are using a lower version that does not support this. The old way that will probably work if you are using v1.2 is to use templates - e.g.

<tr data-bind="template:{name: 'tableHeadersTemplate', foreach: tableHeaders}">
</tr>

<script type="text/html" id="tableHeadersTemplate">    
   <th data-bind="text: title"></th>
</script>

This will also work in v2.0 and above but obviously generates much more markup than the way you are currently trying.

Upvotes: 1

Related Questions