敲除错误 - 无法处理绑定“foreach”答案

【问题标题】：Knockout error - Unable to process binding “foreach”敲除错误 - 无法处理绑定“foreach”
【发布时间】：2015-12-06 00:48:23
【问题描述】：

我在查看我的代码有什么问题时遇到了一些麻烦。更可能与 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>

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

【问题讨论】：

foreach: favoriteSpot ???你的意思是 hotSpotList ， foreach 迭代数组
您的视图模型上似乎没有 favoriteSpot 属性。你的意思是hotSpotList？
谢谢各位大神！长时间盯着屏幕。

标签： javascript html knockout.js

【解决方案1】：

正如评论中提到的@saj 和@haim770，视图模型上没有favoriteSpot 属性。因此，数据绑定应该循环 hotSpotList 以获取其中的网站属性。如下所示。，

data-bind="foreach: hotSpotList"

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

你只需要添加一个带有点击绑定的按钮，The Button should be placed before the exception line.

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

以上代码会将整个上下文记录在browser console(F12) 中。像往常一样，你会得到例外。并且此代码不会解决问题。但这将非常有助于确定问题。

以上代码将记录当前操作的entire context。其中包含具有值的对象、属性。

以下是您可以准确发现绑定对象有异常的常见场景。

1.由于范围级别问题，属性存在/缺失？

2.是否有区分大小写的问题？

3.你的对象在哪里？是父母，孩子/一个人吗？

4.绑定时出现异常的人为错误。

还有其他几种方法可以找到视图中的对象/数据：

1.记录根目录：

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

2.记录当前范围数据：

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

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

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

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

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

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

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

当您单击按钮时，显然该消息将在控制台中记录为undefined。

希望这会有所帮助。，

【讨论】：