2013-04-05 4 views
1

Я пытаюсь использовать knockout.js на localhost, но он, похоже, не загружается/работает должным образом, и я не могу понять, что происходит. После загрузки появляется текст, но ни одна из функций нокаута отсутствует. В принципе, это всего лишь текст, и я ничего не могу изменить.knockout.js не загружается должным образом

я открыл консоль, и я получаю следующее сообщение об ошибке со ссылкой на knockout.js

В хроме ошибка

Uncaught TypeError: Cannot read property 'nodeType' of null knockout.js:12 
Y knockout.js:12 
L.b.Da knockout.js:58 
(anonymous function) 

В светлячок ошибка

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

Я пробовал 3 разных варианта нокаута, и все они приводят к той же ошибке.

Я примерю пример подачи авиалиний с сайта нокаута. У меня есть 4 файла в одной папке. Я не был уверен, что, если мне нужно JQuery там так я включил, что тоже

meals.html

meal_info.js

knockout.js

jquery.js

это meal_info.js

// Class to represent a row in the 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 for this screen, along with initial state 
function ReservationsViewModel() { 
    var self = this; 

    // Non-editable catalog data - would come from the 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; 
     for (var i = 0; i < 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()); 

это 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 another seat</button> 

<h3 data-bind="visible: totalSurcharge() > 0"> 
    Total surcharge: $<span data-bind="text: totalSurcharge().toFixed(2)"></span> 
</h3> 

ответ

4

Вам необходимо загрузить Knockout перед применением привязок или вызывать какие-либо функции Knockout, поэтому изменить:

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

к этому:

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

Если открыть консоль отладки JavaScript У Вероятно, вы увидите ошибку о «ko», которая не определена.

Обновление на основе вашего редактирования - Ваша переработка вопроса напоминает о том, что я подозреваю, что проблема сейчас. Вы должны применять нокаут после HTML, а не раньше. Связанный с этим вопрос - Getting "Cannot read property 'nodeType' of null" when calling ko.applyBindings

+0

Хм, на самом деле я только что открыл, и на нем появляется ошибка на нокауте, в котором говорится: «Невозможно прочитать TypeError: Can not Read Property» nodeType «null».Я попробую другую версию – user1406951

+0

@ user1406951 попробую его после исправления snixtor – basarat

+0

@ Басарат Али Я так и не сделал. Я все еще получаю unsached TypeError в файле нокаута. Я попробовал 3 разных варианта нокаута, и все это дало мне ошибку. – user1406951

0

Исходя из вашего исходного кода. Вы привязки данных к имени, но имя не является наблюдаемым:

<td><input data-bind="value: name" /></td> 

и

self.name = name; 
1

вам нужен HTML первым, а затем включают knockout.js

т.е. переместить две JS линии в bottom

Смежные вопросы