javascript - knockout.js not loading properly -

i'm trying use knockout.js on localhost doesn't appear loading/working , can't figure out what's going on. upon loading text appears none of knockout functionality there. it's text , can't modify anything.

i opened console , i'm getting following error in reference knockout.js

in chrome error

uncaught typeerror: cannot read property 'nodetype' of null knockout.js:12 y knockout.js:12 l.b.da knockout.js:58 (anonymous function) 

in firefox error

[00:26:57.685] typeerror: f null @ http://localhost/knockout_test/knockout.js:49 

i tried 3 different versions of knockout , result in same error.

i'm trying out airline meals example knockout website. have 4 files in same folder. wasn't sure if needed jquery in there included too

meals.html

meal_info.js

knockout.js

jquery.js

this meal_info.js

// class represent row in seat reservations grid function seatreservation(name, initialmeal) {     var self = this;     self.name = name;     self.meal = ko.observable(initialmeal);      self.formattedprice = ko.computed(function() {         var price = self.meal().price;         return price ? "$" + price.tofixed(2) : "none";             });     }  // overall viewmodel screen, along initial state function reservationsviewmodel() {     var self = this;      // non-editable catalog data - come server     self.availablemeals = [         { mealname: "standard (sandwich)", price: 0 },         { mealname: "premium (lobster)", price: 34.95 },         { mealname: "ultimate (whole zebra)", price: 290 }     ];          // editable data     self.seats = ko.observablearray([         new seatreservation("steve", self.availablemeals[0]),         new seatreservation("bert", self.availablemeals[0])     ]);      // computed data     self.totalsurcharge = ko.computed(function() {        var total = 0;        (var = 0; < self.seats().length; i++)            total += self.seats()[i].meal().price;        return total;     });          // operations     self.addseat = function() {         self.seats.push(new seatreservation("", self.availablemeals[0]));     }     self.removeseat = function(seat) { self.seats.remove(seat) } }  ko.applybindings(new reservationsviewmodel()); 

this meals.html

<!--meals.html--> <script type="text/javascript" src="knockout.js"></script> <script type="text/javascript" src="meal_info.js"></script>  <h2>your seat reservations (<span data-bind="text: seats().length"></span>)</h2>  <table>     <thead><tr>         <th>passenger name</th><th>meal</th><th>surcharge</th><th></th>     </tr></thead>     <tbody data-bind="foreach: seats">         <tr>             <td><input data-bind="value: name" /></td>             <td><select data-bind="options: $root.availablemeals, value: meal, optionstext: 'mealname'"></select></td>             <td data-bind="text: formattedprice"></td>             <td><a href="#" data-bind="click: $root.removeseat">remove</a></td>         </tr>         </tbody> </table>  <button data-bind="click: addseat, enable: seats().length < 5">reserve seat</button>  <h3 data-bind="visible: totalsurcharge() > 0">     total surcharge: $<span data-bind="text: totalsurcharge().tofixed(2)"></span> </h3> 

you need load knockout before applying bindings or calling knockout functions, change this:

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

to this:

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

if open javascript debug console you'll see error "ko" not being defined.

update based on edit - revision question sort of obscures suspect issue is. should applying knockout after html, not before. related question - getting "cannot read property 'nodetype' of null" when calling ko.applybindings