Created
February 20, 2016 13:46
-
-
Save kakikubo/f36dc7f397cb5f646bc9 to your computer and use it in GitHub Desktop.
formを入力数をknockout.jsを使って便利にしたいなと思ってテスト
This file contains hidden or 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
| window.onload = function() { | |
| var viewModel = { | |
| array : ko.observableArray( | |
| [ | |
| // 'hoge', | |
| // 'huga', | |
| 'piyo' | |
| ] | |
| ), | |
| canRemove : function(){ | |
| if (this.array().length > 1){ | |
| return true; | |
| } else { | |
| return false; | |
| } | |
| } | |
| }; | |
| ko.applyBindings(viewModel); | |
| document.getElementById('add').onclick = function(){ | |
| viewModel.array.push('追加'); | |
| }; | |
| document.getElementById('remove').onclick = function(){ | |
| viewModel.array.pop(); | |
| }; | |
| }; |
This file contains hidden or 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"/> | |
| <script src="../../dotfiles/bower_components/knockout/knockout.js"></script> | |
| <script src="sample.js"></script> | |
| <style> | |
| div { | |
| width: 100px; | |
| height: 100px; | |
| background-color: red; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <button id="add" >add</button> | |
| <button id="remove" data-bind="enable: array().length > 1">remove</button> | |
| <form action="cgi-bin/formmail.cgi" method="post"> | |
| <!-- ko foreach: array --> | |
| <p data-bind="text: $data"></p> | |
| <p> | |
| 名前：<input type="text" name="name" size="40"> | |
| </p> | |
| <p> | |
| 性別：<input type="radio" name="sex" value="male">男 | |
| <input type="radio" name="sex" value="female">女 | |
| </p> | |
| <p> | |
| 血液型：<select name="blood"> | |
| <option value="A">A型</option> | |
| <option value="B">B型</option> | |
| <option value="O">O型</option> | |
| <option value="AB">AB型</option> | |
| </select> | |
| </p> | |
| <p> | |
| ご感想：<br> | |
| <textarea name="kanso" rows="4" cols="40"></textarea> | |
| </p> | |
| <p> | |
| <input type="submit" value="送信"><input type="reset" value="リセット"> | |
| </p> | |
| <!-- /ko --> | |
| </form> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment