javascript - 简单的 KnockoutJS 尝试 - foreach 给出无法处理绑定(bind) [属性] 未定义错误

Question

我第一次尝试通过 foreach 绑定(bind)使用 KnockoutJS，但我不断收到错误:

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

它似乎没有深入到数组中，但我无法发现问题是什么。我做错了什么？

Answer 1

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

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