title: "TypeError: object is not a function" when using knockout and breeze
body: <h1>Problem</h1>
  
  <blockquote>
    <p>I got a "<strong><em>TypeError: object is not a function</em></strong>" error when <code>EntityManager.saveChanges</code>. The error arises before breeze sends anything to the server.</p>
    
    <p>When I read the (long) stack trace, I see that the error is thrown inside a Breeze method called <code>InitializeEntityPrototype.prototype.getProperty</code>.</p>
  </blockquote>
  
  <p>There are other places you might encounter this error; this just happens to be the place I discovered it today.</p>
  
  <h1>Cause</h1>
  
  <p>Note that my application uses Knockout (ko). That means my entity model is managed by the breeze "ko" model adapter which expects <strong><em>every data property</em></strong> to be a <strong>ko.observable</strong> (an <code>observable</code> or an <code>observableArray</code>). That means that your property values are implemented as <strong>functions</strong>, not primitive data types, arrays, or objects. </p>
  
  <p>Breeze initializes my entities with observable properties so I don't have to do it myself. But it is up to me <strong>preserve those observables when I set entity models in my code</strong>.</p>
  
  <p>One of the most common mistakes in ko programming is to set the property rather than call the property setter.</p>
  
  <pre><code>todo.Description("foo");  // Correct ... call the ko.observable assignment function
  todo.Description = "foo"; // WRONG ... wipes out the observable function !!!
  </code></pre>
  
  <p>The moment I make the mistake of assigning "foo" to <code>todo.Description</code>, the observable function is gone ... and so is Breeze's ability to monitor changes to that property.</p>
  
  <p>My data bound HTML controls may appear to continue working. Knockout doesn't have to bind to an observable; it will happily bind to a primitive data value. But now this becomes a <strong>one-time, read-only binding</strong>. The property ceases to be observable. Subsequent changes to the property will not be propagated to the screen.</p>
  
  <p>In other words, my mistaken assignment results in a silent error in UI behavior.</p>
  
  <p>But my mistake is not silent when Breeze attempts to process the property. Breeze assumes that an entity data property is a ko function. The Breeze ko model adapter doesn't bother to check ... it just calls what it presumes to be a function. Here's the (internal) entity <code>getProperty</code> implementation:</p>
  
  <pre><code>proto.getProperty = function (propertyName) {
    return this[propertyName]();
  };
  </code></pre>
  
  <p>You can see why that is going to throw an exception if <code>this[propertyName]</code> is anything other than a function.</p>
  
  <p>Sadly for me, the error is likely to be thrown somewhere deep in the bowels of a Breeze operation. The error message "object is not a function" (or something similar) could be about anything. I'm unlikely to make the connection.</p>
  
  <p>This S.O. question is a reminder to look for this particular cause.</p>
  
  <h1>What to do?</h1>
  
  <p>It's clearly my fault. Now I have to find where I assigned the entity property instead of calling the function ... and fix that.</p>
  
  <p>My search depends upon knowing the property name. The present error message doesn't tell me the name. So I've got to breakpoint the code and catch the error as it is thrown.</p>
  
  <p>A "simple" expedient is to temporarily monkey-patch this method in <em>breeze.debug.js</em> with a <code>try/catch</code> version.</p>
  
  <ol>
  <li>open <em>breeze.debug.js</em> in an editor</li>
  <li>find "<code>return this[propertyName]();</code>"</li>
  <li><p>change it to this:</p>
  
  <pre><code>proto.getProperty = function(propertyName) {
    try {
      return this[propertyName]();
    } catch (err) {
      debugger;
      err.message = propertyName + ' is not a ko function; did you wipe it out by assignment?\n' + 
                    (err.message || '');
      throw err;
    }
  }
  </code></pre></li>
  <li><p>run the app again with the Developer Tools open</p></li>
  </ol>
  
  <p>It should stop at the <code>debugger</code> line where you'll learn the property name and the entity involved.</p>
  
  <h1>Should Breeze provide a richer error message?</h1>
  
  <p>It would be nice if Breeze composed this message for me.  In fact, the team is looking into doing that.</p>
  
  <p>The main obstacle is performance. The <code>getProperty</code> and <code>setProperty</code> methods are on a hot path. They get called a lot, especially during query result materialization. The Breeze team is leery of extra logic in this sensitive area. We don't want everyone to pay a big price to catch developer error, at least not in a production (minified) Breeze library.</p>
  
  <p>Let's give the Breeze team time to figure this out.</p>