1

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)

Firefoxではエラーは

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

ノックアウトの 3 つの異なるバージョンを試しましたが、すべて同じエラーが発生しました。

ノックアウト Web サイトの航空会社の食事の例を試しています。同じフォルダに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 の呼び出し時に「null のプロパティ 'nodeType' を読み取れません」というメッセージが表示される

于 2013-04-05T04:03:39.280 に答える
1

最初に HTML が必要です。次に、knockout.js を含めます。

つまり、2 つの JS 行を一番下に移動します。

于 2014-03-11T12:34:03.810 に答える