1

我正在尝试在 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，所以我也包括在内

餐饮.html

餐饮信息.js

淘汰赛.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());

这是饭菜.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

3 回答 3

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之后应用淘汰赛，而不是之前。相关问题 -调用 ko.applyBindings 时获取“无法读取属性 'nodeType' of null”

于 2013-04-05T04:03:39.280 回答
1

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

即把两条JS线移到底部

于 2014-03-11T12:34:03.810 回答
0

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

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

和

self.name = name;
于 2013-04-05T04:56:57.647 回答