Knockout unable to parse bindings to a function in foreach

Question

I'm using Knockout and Knockout-REST (which does the mapping and makes all objects observable):

<script> var regosViewModel = new RegosViewModel();</script>

<span data-bind="text: regos().list()[0].rid()"></span>

<table class="table table-striped">
<thead><th>rid</th></thead>

<div data-bind="foreach: regos().list()">
<tr><td data-bind="text: rid()"></td></tr>

<script>ko.applyBindings(regosViewModel);</script>

The span is returning the number 1, but trying to do the same within the foreach loop below leads to "Error: Unable to parse bindings. Message: ReferenceError: Can't find variable: rid; Bindings value: text: rid()".

Can anyone explain why? Of note, text: $index also has the same bindings error.

You need to put the "data-bind="foreach: regos().list()" on the tr and delete the div: e.g: <tr data-bind="foreach: regos().list()><td data-bind="text: rid()"></td></tr> — nemesv

user3297291 user3297291 · Accepted Answer · 2016-10-04T14:16:11

When data-binding a table element, you'll have to make sure it produces valid html. A table can't hold a div directly. Try this:

<table class="table table-striped">
  <thead>
    <tr>
      <th>rid</th>
    </tr> 
  </thead>
  <tbody data-bind="foreach: regos().list()">
    <tr>
      <td data-bind="text: rid()"></td>
    </tr>
  </tbody>
</table>

Check out this example that shows that an invalid table markup won't render:

ko.applyBindings({ arr: [{label: "label 1"}, {label: "label 2"}] });

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<h3>Valid table:</h3>
<table>
  <tbody data-bind="foreach: arr">
    <tr>
      <td data-bind="text: label"></td>
    </tr>
  </tbody>
</table>

<h3>Invalid table</h3>
<table>
  <div data-bind="foreach: arr">
    <tr>
      <td data-bind="text: label"></td>
    </tr>
  </div>
</table>

Knockout unable to parse bindings to a function in foreach

1 Answers