Knockout - Uncaught ReferenceError: Unable to process binding

Published on Oct 27, 2014 by Jamie Munro

If you've used Knockout.js in your project, at some point or another you've probably encountered the following error "Uncaught ReferenceError: Unable to process binding". The most likely cause is a typo somewhere or forgetting to change the context. E.g. you are within a foreach binding and forget to use $parent.

I recently encountered this issue and could not find the typo anywhere. Like most developers in my situation I was getting really frustrated, banging my head against the world looking for answers.

Unfortunately, there is no easy answer to this bug; however, I can suggest an excellent technique that will hopefully help point you in the right direction.

Here is a complete example that creates a table and displays a list of books within the table. There is an unfortunate typo within one of the td data bindings.




<!DOCTYPE html>
<html>
<head>
<title>Data Binding with KnockoutJS</title>
</head>
<body>

<table>
<thead>
<tr>
<th>Title</th>
<th>ISBN</th>
<th>Published</th>
</tr>
</thead>
<tbody data-bind="foreach: books">
<tr>
<td data-bind="text: title"></td>
<td data-bind="text: isbn"></td>
<td data-bind="text: formatDate(publishedDate)"></td>
</tr>
</tbody>
</table>

<script type='text/javascript' src='http://cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js'></script>
<script>
function ViewModel() {
var self = this;

self.books = [
{
title: 'Rapid Application Development With CakePHP',
isbn: '1460954394',
publishedDate: '2011-02-17'
},
{
title: '20 Recipes for Programming MVC 3: Faster, Smarter Web Development',
isbn: '1449309860',
publishedDate: '2011-10-14'
},
{
title: '20 Recipes for Programming PhoneGap: Cross-Platform Mobile Development for Android and iPhone',
isbn: '1449319548',
publishedDate: '2012-04-06'
}
];

self.formatDate = function(dateToFormat) {
var months = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");

var d = new Date(dateToFormat);

return months[d.getMonth()] + ' ' + d.getDate() + ', ' + d.getFullYear();
};
};

var viewModel = new ViewModel();
ko.applyBindings(viewModel);
</script>
</body>
</html>


Running this example provides the following error:
Uncaught ReferenceError: Unable to process binding "text: function (){return title }"
Message: title is not defined

My first clue is it states title is not defined. I can clearly see inside the books are contains a property called title. No typos.

The trick to helping determine the typo is to temporarily remove the inside of the foreach and replace it with the following: <td data-bind="text: ko.toJSON($data)"></td>

The resulting JSON that is outputted is as follows:
{"books":[{"title":"Rapid Application Development With CakePHP","isbn":"1460954394","publishedDate":"2011-02-17"},{"title":"20 Recipes for Programming MVC 3: Faster, Smarter Web Development","isbn":"1449309860","publishedDate":"2011-10-14"},{"title":"20 Recipes for Programming PhoneGap: Cross-Platform Mobile Development for Android and iPhone","isbn":"1449319548","publishedDate":"2012-04-06"}]}

Now I finally have my first clue. My foreach binding is clearly not correct as the $data of my supposedly foreach is my entire view model. Looking back at my code, I missed a ":" after the foreach binding before binding to the books array!

So next time, you encounter this relatively vague error, try outputting the contents of $data to help understand what is contained within your data binding that is failing.

Tags: Javascript | KnockoutJS | knockoutjs | data binding | debugging

Related Posts

blog comments powered by Disqus