Question

我正在尝试在localhost上使用knockout.js，但它似乎没有加载/正常工作，我无法弄清楚发生了什么。加载后，文本显示但没有任何淘汰功能。基本上它只是文本，我不能修改任何东西。

我打开了控制台，我在引用knockout.js时遇到以下错误

在chrome中，错误是

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());

这是meal.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之后应用knockout ，而不是之前。相关问题 - 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;

knockout.js没有正确加载

3 个答案: