KnockoutJS First Program
home
Run
screen_rotation
fullscreen
cloud_download
<!DOCTYPE html> <head> <title>KnockoutJS Example</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js" type="text/javascript"></script> </head> <body><p>First name: <input data-bind="value: firstName" /></p> <p>Last name: <input data-bind="value: lastName" /></p> <h1>Hello, <span data-bind="text: fullName"> </span>!</h1> <script> // data model content goes here var ViewModel = function() { this.firstName = ko.observable("Lilly"); //It will Assign Default value & keep wathing changes in input field firstName this.lastName = ko.observable("Ray"); //It will Assign Default value & keep wathing changes in input field lastName 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()); </script> </body> </html>
<!DOCTYPE html> <head> <title>KnockoutJS Example</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js" type="text/javascript"></script> </head> <body><p>First name: <input data-bind="value: firstName" /></p> <p>Last name: <input data-bind="value: lastName" /></p> <h1>Hello, <span data-bind="text: fullName"> </span>!</h1> <script> // data model content goes here var ViewModel = function() { this.firstName = ko.observable("Lilly"); //It will Assign Default value & keep wathing changes in input field firstName this.lastName = ko.observable("Ray"); //It will Assign Default value & keep wathing changes in input field lastName 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()); </script> </body> </html>
Copyrights@tutorialsplane.com