Home/ Questions/Q 8109335
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-06T01:23:27+00:00

Am newbie in KnockoutJs , i tried all tutorials on its official website. Now

  • 0

Am newbie in KnockoutJs, i tried all tutorials on its official website.
Now i want to run all the practical tutorial on my local machine, i have downloaded knockout-2.1.0.js.

I tried this code but its not working on local machine

index.php
---------
<!DOCTYPE html>
<html>
    <head>
        <title>Knockout</title>
        <script src="js/knockout-2.1.0.js"></script>
        <link rel="stylesheet" href="css/styles.css" />
        <script>
        // This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI
        function AppViewModel() {
            this.myname= ko.observable("Frank");
            this.myage= ko.observable("26");

            this.mydetails= ko.computed(function() {
                var x;
                return this.myname() + ", and my age is " + this.myage() + 'yr. old.';
            }, this);

            this.capitalizeMyName = function() {
                var currentVal = this.myname();        // Read the current value
                this.myname(currentVal.toUpperCase()); // Write back a modified value
            };
        }

        // Activates knockout.js
        ko.applyBindings(new AppViewModel());
        </script>
    </head>
    <body>
    <p>New Application</p>
        <!-- This is a *view* - HTML markup that defines the appearance of your UI -->
        <p>My Name: <strong data-bind="text: myname"></strong></p>
        <p>My Age: <strong data-bind="text: myage"></strong></p>

        <p>My Name: <input data-bind="value: myname" /></p>
        <p>My Age: <input data-bind="value: myage" /></p>

        <p>Full Detalis: <strong>Hi, my name is <text data-bind="text: mydetails"></strong></p>

        <button data-bind="click: capitalizeMyName">Go caps</button>
    </body>
</html>

If Someone has knowledge or idea about this, then suggest me. Thanks!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    http://code.jquery.com/jquery-1.7.2.min.js

    you need to include Minified file : js/jquery-1.7.2.min.js

    And put your viewmodel code between:

  $(document).ready(function(){

  // This is a simple *viewmodel* - JavaScript that defines the data and behavior of

});
    • 0