敲除模板绑定项未定义

Question

我正在使用敲除将数据绑定到模板。第一个模板正确绑定，正确显示图像和其他数据元素，但是我收到以下错误，并且在第一个模板之后它没有绑定到其他模板。

消息：无法处理绑定“attr: function(){return {src:imageUrl} }”

消息：imageUrl 未定义

这是模板的相关部分：

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

我是这样称呼它的：

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

这是thisWeeksOne的一个例子

我认为这是一个时间问题，但不知道如何处理。有人有这方面的经验吗？

Answer 1

你得到的错误信息非常简单

消息：imageUrl 未定义

所以您的 $data 中缺少 imageUrl。

我确实模拟了你的错误：

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);

你可以使用 if 来检查属性是否未定义，如下所示：

<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>

小提琴链接：https://jsfiddle.net/8dx2acfh/13/