Javascript 剔除错误-无法处理绑定“；foreach&x201D；

我发现我的代码有点问题。更有可能是使用Knockout.js部分。。。它给了我以下错误：

消息：无法处理绑定“attr:function（）{return{href:website（）}”

HTML

<div class="demo-card-square mdl-card mdl-shadow--2dp" data-bind="foreach: favoriteSpot">
  <div class="mdl-card__title mdl-card--expand">
    <h2 class="mdl-card__title-text">Update</h2>
  </div>
  <div class="mdl-card__supporting-text" data-bind="text:name"></div>
  <div class="mdl-card__supporting-text" data-bind="text:location"></div>
  <a data-bind="attr: {href: website()}">Website</a>
</div>

更新

JS

var favoriteSpotsList = [{
  venueName: "name",
  venueLocation: "address",
  website: "url",
  image: "<img src='img'",
}];


var favoriteSpot = function(data) {
  this.name = ko.observable(data.venueName);
  this.address = ko.observable(data.venueLocation);
  this.website = ko.observable(data.website);
  this.image = ko.observable(data.img);
};

var AppViewModel = function() {
  var self = this;

  /* Create array of hotspot locations. */
  this.hotSpotList = ko.observableArray([]);

  favoriteSpotsList.forEach(function(spot) {
    self.hotSpotList.push(new favoriteSpot(spot));
  });
};

ko.applyBindings(new AppViewModel());

var-favoriteSpotsList=[{
VenuName:“名称”，
venueLocation:“地址”，
网址:"网址",，
图片：“正如注释中提到的
@saj
和
@haim770
，视图模型上没有
favoriteSpot
属性。因此，数据绑定应该循环
热点列表
，以获取其中的网站属性。如下所示

data-bind="foreach: hotSpotList"

有一种简单的方法可以识别此类问题，特别是在视图中执行绑定时

您只需添加一个带有单击绑定的按钮，
该按钮应放在异常行之前。

<button data-bind="click: function () { console.log($context); }"> Context Log </button>

2.记录当前范围数据：

当前数据日志

3.记录父数据：（在循环时特别有用）

父日志

4.记录父数据列表：（当我们与不同类型的父数据循环时特别有用）

家长日志

5.记录父数据列表：（当我们循环和访问不同类型的父数据时特别有用）

属性日志

例如，在您的情况下，您可以执行以下操作：

<!-- Added this button before the exception -->

<button data-bind="click: function () { console.log(favoriteSpot); }">Log </button>

<div class="demo-card-square mdl-card mdl-shadow--2dp" data-bind="foreach: favoriteSpot">
        <div class="mdl-card__title mdl-card--expand">
            <h2 class="mdl-card__title-text">Update</h2>
        </div>
        <div class="mdl-card__supporting-text" data-bind="text:name">
        </div>
        <div class="mdl-card__supporting-text" data-bind="text:location">
        </div>
        <a data-bind="attr: {href: website()}">Website</a>
    </div>


日志
更新

当您单击该按钮时，很明显，消息将作为
undefined
记录在console中

希望这有帮助。，
foreach:favoriteSpot？？？您是指热点列表，foreach在阵列上迭代。视图模型上似乎没有
favoriteSpot
属性。您是指
hotSpotList
？谢谢先生们！长时间盯着屏幕看。
<button data-bind="click: function () { console.log($data); }"> Current Data Log </button>

<button data-bind="click: function () { console.log($parent); }"> Parent Log </button>

<button data-bind="click: function () { console.log($parents); }"> Parents Log </button>

<button data-bind="click: function () { console.log(objectName.propertyName); }">Property Log </button>

<!-- Added this button before the exception -->

<button data-bind="click: function () { console.log(favoriteSpot); }">Log </button>

<div class="demo-card-square mdl-card mdl-shadow--2dp" data-bind="foreach: favoriteSpot">
        <div class="mdl-card__title mdl-card--expand">
            <h2 class="mdl-card__title-text">Update</h2>
        </div>
        <div class="mdl-card__supporting-text" data-bind="text:name">
        </div>
        <div class="mdl-card__supporting-text" data-bind="text:location">
        </div>
        <a data-bind="attr: {href: website()}">Website</a>
    </div>