简单的 KnockoutJS 尝试 - foreach 给出 Unable to process binding [property] is not defined 错误

Posted 2023-03-27

【中文标题】简单的 KnockoutJS 尝试 - foreach 给出 Unable to process binding [property] is not defined 错误

【英文标题】：Simple KnockoutJS attempt - foreach giving Unable to process binding [property] is not defined error

【发布时间】：2018-02-10 23:32:55

【问题描述】：

我第一次尝试将 KnockoutJS 与 foreach 绑定一起使用，但我不断收到错误消息：

Uncaught ReferenceError: Unable to process binding "text: function ()return PhoneTypeName " Message: PhoneTypeName is not defined

这是简化的 html 和 javascript，可以在下面的 jsfiddle 链接中尝试：

HTML

<table>
  <thead>
    <tr>
      <th>Type</th>
      <th>Number</th>
      <th></th>
    </tr>
  </thead>
  <tbody data-name="personPhones" data-bind: "foreach: phones">
    <tr >
      <td>
        <span data-bind="text: PhoneTypeName"></span>
      </td>
      <td>
        <span data-bind="text: PhoneNumber1"></span>
      </td>
    </tr>
  </tbody>
</table>

JS

function PhoneVM(data) 
  if (!(this instanceof PhoneVM))
    return new PhoneVM(data);

  this.ID = ko.observable(data.ID);
  this.PhoneTypeName = ko.observable(data.PhoneTypeName);
  this.PhoneNumber1 = ko.observable(data.PhoneNumber1);


var p1 = new PhoneVM(id: 1, PhoneTypeName: 'Home', PhoneNumber1: '345-234-3455');
var p2 = new PhoneVM(id: 1, PhoneTypeName: 'Home', PhoneNumber1: '345-234-3455');

var arr = [p1, p2];
var vm =  phones: arr ;

ko.applyBindings(vm);

JS Fiddle Here

它似乎没有深入到阵列中，但我无法发现问题所在。我做错了什么？

【参考方案1】：

您的数据绑定的语法略有偏差。你需要一个等号而不是冒号。

data-bind: "foreach: phones" 应该是data-bind="foreach: phones"

【讨论】：

天哪...我知道这会很愚蠢，但这很尴尬。它对我来说是如此的无形。谢谢。