Knockout Template Binding item not defined - templates

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?

Answer 1

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/