CODEWITHSUNDEEP
javascriptjqueryknockout.js
xr280xr
xr280xr

Reputation: 13282

Simple KnockoutJS attempt - foreach giving Unable to process binding [property] is not defined error

I'm trying to use KnockoutJS for the first time with a foreach binding but I keep getting the error:

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

Here is the simplified HTML & javascript which can be tried in the jsfiddle link below that follows:

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

It seems to not be diving into the array, but I can't spot what the problem is. What am I doing wrong?

Upvotes: 0

Views: 165

Answers (1)

Jason Spake
Jason Spake

Reputation: 4304

The syntax of your data-bind is slightly off. You need an equals sign instead of a colon.

data-bind: "foreach: phones" should be data-bind="foreach: phones"

Upvotes: 1

Related Questions