未定义淘汰模板绑定项目

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/