title: Knockout error - Unable to process binding “foreach”
body: <p>I'm having a bit of trouble seeing what's wrong with my code. More likely with the Knockout.js part... It's giving me the following error: </p>
  
  <blockquote>
    <p>Message: Unable to process binding "attr: function (){return {href:website()} }"</p>
  </blockquote>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="demo-card-square mdl-card mdl-shadow--2dp" data-bind="foreach: favoriteSpot"&gt;
    &lt;div class="mdl-card__title mdl-card--expand"&gt;
      &lt;h2 class="mdl-card__title-text"&gt;Update&lt;/h2&gt;
    &lt;/div&gt;
    &lt;div class="mdl-card__supporting-text" data-bind="text:name"&gt;&lt;/div&gt;
    &lt;div class="mdl-card__supporting-text" data-bind="text:location"&gt;&lt;/div&gt;
    &lt;a data-bind="attr: {href: website()}"&gt;Website&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>var favoriteSpotsList = [{
    venueName: "name",
    venueLocation: "address",
    website: "url",
    image: "&lt;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());
  </code></pre>