Knockout Template Binding item not defined

Question

I am binding data to a template using knockout. The first template binds correctly, showing the image and other data elements correctly, however I get the following error and it does not bind to other templates after the first one.

Message: Unable to process binding "attr: function(){return {src:imageUrl} }"

Message: imageUrl is not defined

Here is the relevant part of the template:

<a href="#">
    <img data-bind="attr:{src: imageUrl}" width="263" height="262" alt="image description">
</a>

Here is how I call it:

<div class="panel-body" data-bind="template: {name: 'album-template', data: thisWeeksOne() }"></div>

This is an example of thisWeeksOne

I believe that this is a timing issue, but am not sure how to handle it. Does anyone have experience with this?

Could you show the rest of your code? Or at least the contents of thisWeeksOne — Ray
thisWeeksOne is an observable, I posted a screenshot of it above. — Nick

Matus Jurika Matus Jurika · Accepted Answer · 2018-08-20T08:27:53

Error message you get is pretty straight forward

Message: imageUrl is not defined

so imageUrl is missing in your $data.

I did simulate your error:

HTML

<div data-bind="foreach: imgs">
  <p data-bind="text: description"></p>
  <a href="#">
      <img data-bind="attr:{src: imageUrl}" width="100" height="100" alt="image description">
  </a>
</div>

JS

var model = {
    imgs: [{
        description: 'Phone',
        imageUrl: 'https://www.notebookcheck.net/fileadmin/_processed_/8/0/csm_u11_life_alphr_1c09ab3e96.jpg'
    }, {
   description: 'Car'
  }]
};

ko.applyBindings(model);

You can use if, to check whether property is undefined like this:

<div data-bind="foreach: imgs">
  <!-- ko if: $data.imageUrl -->
  <p data-bind="text: description"></p>
  <a href="#">
      <img data-bind="attr:{src: imageUrl}" width="100" height="100" alt="image description">
  </a>
  <!-- /ko -->
</div>

Link to fiddle: https://jsfiddle.net/8dx2acfh/13/

Knockout Template Binding item not defined

1 Answers