Created
January 23, 2021 16:48
-
-
Save rubystar/711bbbcd55eca259c83c4a83e0bf88fc to your computer and use it in GitHub Desktop.
JS Bin // source https://jsbin.com/bexovusahe
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <title>JS Bin</title> | |
| </head> | |
| <body> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script> | |
| <div id="root"> | |
| <input data-bind="value: name" type="text"> | |
| <span data-bind="text: greet"></span> | |
| <br> | |
| <br> | |
| <br> | |
| <button data-bind="click: increment">+</button> | |
| <button data-bind="click: decrement">-</button> | |
| <button data-bind="click: reset">Reset</button> | |
| <h2 data-bind="text: counter"> </h2> | |
| </div> | |
| <script id="jsbin-javascript"> | |
| function MyViewModel() { | |
| var self = this; | |
| self.counter = ko.observable(0); | |
| self.name = ko.observable("World"); | |
| self.greet = ko.computed(function() { | |
| return "Hello " + self.name(); | |
| }, self); | |
| self.increment = function() { | |
| var current = self.counter(); | |
| self.counter(current + 1); | |
| } | |
| self.decrement = function() { | |
| var current = self.counter(); | |
| if (current === 0) { | |
| self.counter(0); | |
| return; | |
| } | |
| self.counter(current - 1); | |
| } | |
| } | |
| ko.applyBindings(new MyViewModel()); | |
| </script> | |
| <script id="jsbin-source-javascript" type="text/javascript">function MyViewModel() { | |
| var self = this; | |
| self.counter = ko.observable(0); | |
| self.name = ko.observable("World"); | |
| self.greet = ko.computed(function() { | |
| return "Hello " + self.name(); | |
| }, self); | |
| self.increment = function() { | |
| var current = self.counter(); | |
| self.counter(current + 1); | |
| } | |
| self.decrement = function() { | |
| var current = self.counter(); | |
| if (current === 0) { | |
| self.counter(0); | |
| return; | |
| } | |
| self.counter(current - 1); | |
| } | |
| } | |
| ko.applyBindings(new MyViewModel());</script></body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function MyViewModel() { | |
| var self = this; | |
| self.counter = ko.observable(0); | |
| self.name = ko.observable("World"); | |
| self.greet = ko.computed(function() { | |
| return "Hello " + self.name(); | |
| }, self); | |
| self.increment = function() { | |
| var current = self.counter(); | |
| self.counter(current + 1); | |
| } | |
| self.decrement = function() { | |
| var current = self.counter(); | |
| if (current === 0) { | |
| self.counter(0); | |
| return; | |
| } | |
| self.counter(current - 1); | |
| } | |
| } | |
| ko.applyBindings(new MyViewModel()); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment