Knockout.js

Question

I am doing a very simple hello world for knockout js (from http://goo.gl/lddLl) : but my code is generating an error I don't understand.

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>AJAX Example</title>
    <script src="../Scripts/jquery-2.0.3.js"></script>
    <script src="../Scripts/knockout-3.0.0.debug.js"></script>

    <script>

        // Here's my data model
        var ViewModel = function (first, last) {
            this.firstName = ko.observable(first);
            this.lastName = ko.observable(last);

            this.fullName = ko.computed(function () {
                // Knockout tracks dependencies automatically. It knows that fullName depends on firstName and lastName, because these get called when evaluating fullName.
                return this.firstName() + " " + this.lastName();
            }, this);
        };

        ko.applyBindings(new ViewModel("Planet", "Earth")); // This makes Knockout get to work

    </script>
</head>
<body>

    <p>First name: <input data-bind="value: firstName" /></p>
    <p>Last name: <input data-bind="value: lastName" /></p>
    <h2>Hello, <span data-bind="text: fullName"> </span>!</h2>

</body>
</html>

the ko.applyBindings call raises the error:

Uncaught TypeError: Cannot read property 'nodeType' of null knockout-3.0.0.debug.js:2439

from the knockout-3.0.0.debug.js code:

// Perf optimisation: Apply bindings only if...
// (1) We need to store the binding context on this node (because it may differ from the DOM parent node's binding context)
//     Note that we can't store binding contexts on non-elements (e.g., text nodes), as IE doesn't allow expando properties for those
// (2) It might have bindings (e.g., it has a data-bind attribute, or it's a marker for a containerless template)
var isElement = (nodeVerified.nodeType === 1);

I'm too ignorant to know what I'm doing incorrectly...

Shadow_boi · Accepted Answer

2 ways to solve it i guess.

1 easiest way: wrap your script inside

$(document).ready(function() {
    your script goes here
});

use jQuery's ready() function to delay the initialization until the page has loaded.

2 move your script under:

<p>First name: <input data-bind="value: firstName" /></p>
<p>Last name: <input data-bind="value: lastName" /></p>
<h2>Hello, <span data-bind="text: fullName"> </span>!</h2>

HTML is parsed top-to-bottom. if you put the scripts before html elements, they could be run before some or all page elements are ready to be interacted with.

Matt · Answer

Your script is executing before the body has been added to the DOM, the body is the default root node for the binding. Put the script at the bottom like so:

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>AJAX Example</title>
<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.0.0.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.0.0.debug.js"></script>


</head>
<body>

<p>First name: <input data-bind="value: firstName" /></p>
<p>Last name: <input data-bind="value: lastName" /></p>
<h2>Hello, <span data-bind="text: fullName"> </span>!</h2>

<script>

    // Here's my data model
    var ViewModel = function (first, last) {
        this.firstName = ko.observable(first);
        this.lastName = ko.observable(last);

        this.fullName = ko.computed(function () {
            // Knockout tracks dependencies automatically. It knows that fullName depends on firstName and lastName, because these get called when evaluating fullName.
            return this.firstName() + " " + this.lastName();
        }, this);
    };

    ko.applyBindings(new ViewModel("Planet", "Earth")); // This makes Knockout get to work

</script>

Knockout.js - simple "Hello World" fails

Tags:

javascript

TheFastCat

2 Answers

Shadow_boi

Matt

Recent Activity

Donate For Us