knockout.js加载不正确

Question

我试图在本地主机上使用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)

在firefox中，错误是

[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>

Answer 1

在应用绑定或调用任何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

Answer 2

您首先需要HTML，然后包含knockout.js

即将两条JS线移到底部

Answer 3

根据你的原始代码。您正在对姓名进行数据库化，但名称是不可观察的：

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

和

self.name = name;