Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can't get the most simple knockout.js sample to work?

This really bothers me. Please have a look at the Hello World example of knockout.js.

Here is my code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Home Page</title>
    <script src="knockout-1.2.1.debug.js" type="text/javascript"></script>

    <script type="text/javascript">
        // Here's my data model
        var viewModel = {
            firstName: ko.observable("Planet"),
            lastName: ko.observable("Earth")
        };
        viewModel.fullName = ko.dependentObservable(function () {
            // Knockout tracks dependencies automatically. It knows that fullName depends on firstName and lastName, because these get called when evaluating fullName.
            return viewModel.firstName() + " " + viewModel.lastName();
        });

        ko.applyBindings(viewModel); // 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>

It seems, that the binding doesn't work. If I alert(viewModel.fullName()); I get "Planet Earth" as expected. But neither the input elements nor the span gets filled with data.

What am I doing wrong?

Here is a zip file which includes both my file and knockout.js

like image 751
Sandro Avatar asked Aug 22 '11 23:08

Sandro


People also ask

How do I activate KnockoutJS?

Activating Knockoutko. applyBindings(myViewModel); You can either put the script block at the bottom of your HTML document, or you can put it at the top and wrap the contents in a DOM-ready handler such as jQuery's $ function. In case you're wondering what the parameters to ko.

Do people still use KnockoutJS?

KnockoutJS is far from dead, and it's actually still being improved and evolved (see Technical Knockout) but newer frameworks seem a far better bet for our needs, considering activity and performance.

How do you apply knockout?

Hold can 2 or 3 feet from surfaces to be treated. Be sure to apply uniformly using a sweeping motion to carpets, rugs, drapes, and all surfaces of upholstered furniture. Be sure to treat pet bedding as this is a primary hiding place for fleas. No need to remove pet bedding after treatment.

How do I assign a value to knockout observable?

To create an observable, assign the ko. observable function to the variable. A default value can be specified in the constructor of the call. Knockout then converts your variable into a function and tracks when the value changes, in order to notify the UI elements associated with the variable.


1 Answers

Your issue is that you are calling ko.applyBindings too soon.

You want to either move your script tag to the bottom or execute it in an onload or something like jQuery's ready function.

like image 66
RP Niemeyer Avatar answered Sep 30 '22 04:09

RP Niemeyer