Getting "Cannot read property 'nodeType' of null" when calling ko.applyBindings

Question

This problem was happening because I was trying to bind an HTML element before it was created.

My script was loaded on top of the HTML (in the head) but it needed to be loaded at the bottom of my HTML code (just before the closing body tag).

Thanks for your attention James Allardice.

A possible workaround is using defer="defer"

<script src="script.js" type="text/javascript" defer="defer"></script>

Use this if the script is not going to generate any document content. This will tell the browser that it can wait for the content to be loaded before loading the script.

Further reading.

Hope it helps.

You might want to consider using the jquery ready handler for this

$(function() {
   function TaskListViewModel() {
   ...
   ko.applyBindings(new TaskListViewModel());
});

Then you achieve two things:

1. Avoid polluting the global namespace
2. Knockout binding occurs AFTER the DOM is created. You can place your javascript wherever it is suited for organization.

See http://api.jquery.com/ready/

if you have jQuery put apply binding inside onload so that knockout looks for the DOM when DOM is ready.

$(document).ready(function(){
    ko.applyBindings(new TaskListViewModel());
});

You have a simple spelling mistake:

self.addTask = fuction() {

Should be:

self.addTask = function() { //Notice the added 'n' in 'function'