Home/ Questions/Q 8306455
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-08T18:20:04+00:00

I understand how the tutorial works on the page, but I’m trying to set

  • 0

I understand how the tutorial works on the page, but I’m trying to set one up locally to create a calculator and can’t get knockout.js to work. It doesn’t initialize or populate like the knockout.js online tutorial.

HTML 

<html>
<head>
    <script type="text/javascript" language="javascript" src="../knockout-2.1.0.js"></script>
    <script type="text/JavaScript" language="javascript">
        function AppViewModel() {
            this.firstName = ko.observable("Bert");
            this.lastName = ko.observable("Bertington");
        }
        // Activates knockout.js
        ko.applyBindings(new AppViewModel());
    </script> 
</head>
<body class="calc" onLoad="createnav()">

<div id="all">

    <div id="calc">

        <p>First name: <strong data-bind="text: firstName"></strong></p>
            <p>Last name: <strong data-bind="text: lastName"></strong></p>

            <p>First name: <input data-bind="value: firstName" /></p>
            <p>Last name: <input data-bind="value: lastName" /></p>
    </div>
    <div id="info">
       <!-- outputs will be here -->
    </div>
</div>
</body>
</html>

I’m using knockout.js version 2.1.0. As for location of the src it is correct.

Folder Structure

  ----------
  | Root   |
  ----------_____________________
     |                             |
   -------------------        ------------       ---------------
  | knockout-2.1.0.js |      |  pphcalc   | ___ | HeroPilot.asp |
   -------------------        ------------       ---------------

Any suggestions?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You are applying the bindings in a header script tag so there are not yet any elements to bind to at the point that your ko.applyBindings(new AppViewModel()) line runs.

    You can provide a callback for the JQuery Window.load function to ensure that everything is properly loaded before the bindings get applied. Example: 

    <script type="text/JavaScript" language="javascript">
    function AppViewModel() {
        this.firstName = ko.observable("Bert");
        this.lastName = ko.observable("Bertington");
    }

    // Activates knockout.js
    $(window).load(function() {
        ko.applyBindings(new AppViewModel());
    });
</script>
    • 0