Follow @endyourif rss Facebook LinkedIn

Knockout - Uncaught ReferenceError: Unable to process binding Knockout - Uncaught ReferenceError: Unable to process binding

Published on Jan 31, 2020

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. Luckily I was able to use this Knockout.js tutorial to narrow down and solve my problem.

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!

I would be curious to see if there is a way to convert this example into a KnockoutJS component to make this easier in the future.

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 | Knockout js Tutorial | data binding | debugging

My Books
ASP.NET MVC 5 With Bootstrap and Knockout.js
Knockout.js Building Dynamic Client-Side Applications
20 Recipes for Programming MVC 3
20 Recipes for Programming PhoneGap
Rapid Application Development with CakePHP