Created
March 1, 2015 14:08
-
-
Save mitsuruog/d520426ec33ed1880a4c to your computer and use it in GitHub Desktop.
JS Bin knockout.jsでFRPサンプル1 // source http://jsbin.com/fupacu
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 name="description" content="knockout.jsでFRPサンプル1"> | |
| <script src="http://cdnjs.cloudflare.com/ajax/libs/rxjs/2.3.24/rx.all.js"></script> | |
| <script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"></script> | |
| <meta charset="utf-8"> | |
| <title>JS Bin</title> | |
| </head> | |
| <body> | |
| <input type="email" name="email" id="email"> | |
| <div class="results"></div> | |
| <script id="jsbin-javascript"> | |
| function ViewModel() { | |
| this.email = observable(); | |
| } | |
| // observer | |
| // 指定の値を観測して、変化があったらNotifyを送る | |
| function observable() { | |
| var value; | |
| var module = function(newValue) { | |
| if(typeof(newValue) === 'undefined') { | |
| // getter | |
| return value; | |
| } else { | |
| // setter | |
| value = newValue; | |
| module.valueChanged(); | |
| } | |
| }; | |
| module.valueChanged = function() { | |
| // subscriberに通知 | |
| module.subscriber(value); | |
| }; | |
| return module; | |
| } | |
| // ViewModelとDOMをバインドする | |
| function bindViewModel(vm) { | |
| // vmのemailがpropertyNameとして受け取れる | |
| var propertyNames = Object.getOwnPropertyNames(vm); | |
| propertyNames.forEach(function(propertyName) { | |
| // viewというか観測対象のcomponentかな。。。 | |
| var view = document.getElementById(propertyNames); | |
| var property = vm[propertyNames]; | |
| // ViewModel -> View | |
| property.subscriber = function(newValue) { | |
| view.value = newValue; | |
| }; | |
| // View -> ViewModel | |
| view.addEventListener('input', function(e) { | |
| property(e.target.value); | |
| }); | |
| }); | |
| } | |
| var vm = new ViewModel(); | |
| bindViewModel(vm); | |
| vm.email('[email protected]'); | |
| </script> | |
| <script id="jsbin-source-html" type="text/html"><!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta name="description" content="knockout.jsでFRPサンプル1"> | |
| <script src="//cdnjs.cloudflare.com/ajax/libs/rxjs/2.3.24/rx.all.js"><\/script> | |
| <script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"><\/script> | |
| <meta charset="utf-8"> | |
| <title>JS Bin</title> | |
| </head> | |
| <body> | |
| <input type="email" name="email" id="email"> | |
| <div class="results"></div> | |
| </body> | |
| </html></script> | |
| <script id="jsbin-source-javascript" type="text/javascript">function ViewModel() { | |
| this.email = observable(); | |
| } | |
| // observer | |
| // 指定の値を観測して、変化があったらNotifyを送る | |
| function observable() { | |
| var value; | |
| var module = function(newValue) { | |
| if(typeof(newValue) === 'undefined') { | |
| // getter | |
| return value; | |
| } else { | |
| // setter | |
| value = newValue; | |
| module.valueChanged(); | |
| } | |
| }; | |
| module.valueChanged = function() { | |
| // subscriberに通知 | |
| module.subscriber(value); | |
| }; | |
| return module; | |
| } | |
| // ViewModelとDOMをバインドする | |
| function bindViewModel(vm) { | |
| // vmのemailがpropertyNameとして受け取れる | |
| var propertyNames = Object.getOwnPropertyNames(vm); | |
| propertyNames.forEach(function(propertyName) { | |
| // viewというか観測対象のcomponentかな。。。 | |
| var view = document.getElementById(propertyNames); | |
| var property = vm[propertyNames]; | |
| // ViewModel -> View | |
| property.subscriber = function(newValue) { | |
| view.value = newValue; | |
| }; | |
| // View -> ViewModel | |
| view.addEventListener('input', function(e) { | |
| property(e.target.value); | |
| }); | |
| }); | |
| } | |
| var vm = new ViewModel(); | |
| bindViewModel(vm); | |
| vm.email('[email protected]');</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 ViewModel() { | |
| this.email = observable(); | |
| } | |
| // observer | |
| // 指定の値を観測して、変化があったらNotifyを送る | |
| function observable() { | |
| var value; | |
| var module = function(newValue) { | |
| if(typeof(newValue) === 'undefined') { | |
| // getter | |
| return value; | |
| } else { | |
| // setter | |
| value = newValue; | |
| module.valueChanged(); | |
| } | |
| }; | |
| module.valueChanged = function() { | |
| // subscriberに通知 | |
| module.subscriber(value); | |
| }; | |
| return module; | |
| } | |
| // ViewModelとDOMをバインドする | |
| function bindViewModel(vm) { | |
| // vmのemailがpropertyNameとして受け取れる | |
| var propertyNames = Object.getOwnPropertyNames(vm); | |
| propertyNames.forEach(function(propertyName) { | |
| // viewというか観測対象のcomponentかな。。。 | |
| var view = document.getElementById(propertyNames); | |
| var property = vm[propertyNames]; | |
| // ViewModel -> View | |
| property.subscriber = function(newValue) { | |
| view.value = newValue; | |
| }; | |
| // View -> ViewModel | |
| view.addEventListener('input', function(e) { | |
| property(e.target.value); | |
| }); | |
| }); | |
| } | |
| var vm = new ViewModel(); | |
| bindViewModel(vm); | |
| vm.email('[email protected]'); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment