Home/ Questions/Q 8761107
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T15:12:34+00:00

I am new to Knockoutjs, starting with http://learn.knockoutjs.com/ tutorial but the same when i

  • 0

I am new to Knockoutjs, starting with http://learn.knockoutjs.com/ tutorial but the same when i am trying in local it is not working.

Do i need to write model and view in separate file or same, My question is how to run first knockout program.

<!DOCTYPE HTML>
<html>
    <head>
    <title></title>
        <script type="text/javascript" src='http://cdnjs.cloudflare.com/ajax/libs/knockout/2.1.0/knockout-min.js'></script>
        <script type="text/javascript">
                    // 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>
            <div class='liveExample'>   
    <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>  
</div>​
    </body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You should put ko.applyBindings to the end of page. Here is a quote from official documentation:

    To activate Knockout, add the following line to a block:

    ko.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.

    So code should look as follow:

    <!DOCTYPE HTML>
<html>
    <head>
    <title></title>
        <script type="text/javascript" src='http://cdnjs.cloudflare.com/ajax/libs/knockout/2.1.0/knockout-min.js'></script>
    </head>
    <body>
       <div class='liveExample'>   
           <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>  
       </div>​
       <script type="text/javascript">
            // 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>
    </body>
</html>

    Here is working fiddle: http://jsfiddle.net/vyshniakov/s2LSE/

    • 0