Created
July 2, 2013 10:40
-
-
Save brigand/5908322 to your computer and use it in GitHub Desktop.
KnockoutJs Example for video: http://youtu.be/lGWmaixWNxU
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> | |
| <!-- Simple KnockoutJS App | |
| Released under the MIT License !--> | |
| <html> | |
| <head> | |
| <title>My First Knockout App</title> | |
| <link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css"/> | |
| <link rel="stylesheet" type="text/css" href="assets/css/bootstrap-responsive.css"/> | |
| <link rel="stylesheet" type="text/css" href="assets/css/myfirstko.css" /> | |
| </head> | |
| <body> | |
| <div class="container-fluid"> | |
| <div class="span6 offset3"> | |
| <h1>My First Knockout App</h1> | |
| <div class="row-fluid"> | |
| <div class="offset2 span8"> | |
| <input class="span8 offset2" type="text" data-bind="value: name"> | |
| <h3 data-bind="text: greeting, | |
| style: {color: greetingColor}"></h3> | |
| <button class="btn btn-block" data-bind="click: announce">Announce</button> | |
| <button class="btn btn-block" data-bind="click: toggle(important), | |
| css: {'btn-primary': important}">Important</button> | |
| </div> | |
| <h4><a href="http://youtu.be/lGWmaixWNxU">watch video</a></h4> | |
| </div> | |
| </div> | |
| </div> | |
| <script type="text/javascript" src="assets/js/knockout.js"></script> | |
| <script type="text/javascript" src="assets/js/myapp.js"></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
| /* Simple ViewModel for Knockoutjs app | |
| Released under the MIT License | |
| */ | |
| function ViewModel() { | |
| var self = this; | |
| self.name = ko.observable('Bob'); | |
| self.greeting = ko.computed(function(){ | |
| var name = self.name(); | |
| return 'Hello, ' + name; | |
| }); | |
| self.announce = function() { | |
| alert(self.greeting()); | |
| }; | |
| self.toggle = function(observable){ | |
| return function(){ | |
| observable(!observable()); | |
| }; | |
| }; | |
| self.important = ko.observable(false); | |
| self.greetingColor = ko.computed(function(){ | |
| if(self.important()) { | |
| return 'red'; | |
| } | |
| else return 'gray'; | |
| }); | |
| } | |
| window.app = new ViewModel(); | |
| ko.applyBindings(window.app); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment