daily pastebin goal
34%
SHARE
TWEET

Untitled

a guest Jan 23rd, 2019 101 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>KnockOut JS Test</title>
  5.     <link href="/Content/bootstrap.css" rel="stylesheet"/>
  6.     <link href="/Content/site.css" rel="stylesheet"/>
  7.     <script src="/Scripts/modernizr-2.8.3.js"></script>
  8.     <script src="/Scripts/jquery-3.3.1.js"></script>
  9.     <script src="/Scripts/bootstrap.js"></script>
  10. </head>
  11. <body>
  12.     <script type="text/javascript" src="/Scripts/knockout-3.4.2.js">
  13.         $(document).ready(function () {
  14.             // Here's my data model
  15.             var ViewModel = function (first, last) {
  16.                 this.firstName = ko.observable(first);
  17.                 this.lastName = ko.observable(last);
  18.  
  19.                 this.fullName = ko.computed(function () {
  20.                     // Knockout tracks dependencies automatically. It knows that fullName depends on firstName and lastName, because these get called when evaluating fullName.
  21.                     return this.firstName() + " " + this.lastName();
  22.                 }, this);
  23.             };
  24.  
  25.             ko.applyBindings(new ViewModel("Planet", "Earth")); // This makes Knockout get to work
  26.         }
  27.     </script>
  28.  
  29.     <div class='liveExample'>
  30.         <p>First name: <input data-bind='value: firstName' /></p>
  31.         <p>Last name: <input data-bind='value: lastName' /></p>
  32.         <h2>Hello, <span data-bind='text: fullName'> </span>!</h2>
  33.     </div>
  34. </body>
  35. </html>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top