Knockout unable to process binding

Question

How do I bind a text when it is undefined? For example name is not available:

<table id="recordTbl" data-bind="visible: records().length &gt; 0" class="table">
  <thead>
    <tr>
      <th class="col-md-4">ID</th>
      <th class="col-md-4">Name</th>
    </tr>
  </thead>
  <tbody data-bind="foreach: records">
    <tr>
      <td data-bind="text: id"></td>
      <td data-bind="text: name"></td>
    </tr>
  </tbody>
</table>

I get this error:

Uncaught ReferenceError: Unable to process binding "text: function (){return name }"
Message: name is not defined

Do you mean that some of the items the records array does not have a name property? — nemesv
Will there be a way to do that? Even if the object doesnt have a property (say name as in the comment), can we make anything to stop the exception? :O — G_S

nemesv nemesv · Accepted Answer · 2015-01-24T14:43:13

You can you the $data binding context property which always represents the current view model to access the name through it:

  <tbody data-bind="foreach: records">
    <tr>
      <td data-bind="text: id"></td>
      <td data-bind="text: $data.name"></td>
    </tr>
  </tbody>

With this approach KO won't throw an exception if one of the items in the records does not have a name property.

Without the $data the identifier named name is undefined. However $data.name is always a valid expression it just returns undefined if the current view model does not have a property named name.

Knockout unable to process binding

1 Answers