Knockout.jsで予測身長フォームを作ってみた
本家？ブログ「将来どれくらいの身長になるのか？両親の背丈から予測身長を計算する」で、Knockout.jsで予測身長フォームを作ってみました。
Knockout.jsを最近、仕事でも使っているのです。
MVVMでは、AngularJSをしばらく勉強していました。しかし、AngularJSはver1.3からIE8がサポート外。ver2から記法が全然別ものになるってのを知って、「まだAngularJSは、良いや…」って気持ちになって、Knockout.jsに変更したのです。
Knockout.jsいいですねー。マイクロソフト製だから、IEもサポートだし。jQueryとも共存できすし、実践でも導入しやすいです。
ということで、予測身長フォームのコードです。
[HTML]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<table class="basic"> <tbody> <tr> <th>性別：</th> <td><input name="sex" type="radio" value="male" data-bind="checked: sex" />男<br /> <input name="sex" type="radio" value="female" data-bind="checked: sex" />女</td> </tr> <tr> <th>父親の身長：</th> <td><input name="heightOfFather" type="text" data-bind="value: heightOfFather" />cm</td> </tr> <tr> <th>母親の身長：</th> <td><input name="heightOfMother" type="text" data-bind="value: heightOfMother" />cm</td> </tr> <tr> <th>予測身長：</th> <td data-bind="text: heightOfChild"> </td> </tr> </tbody> </table> <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script> <script src='http://www.kigurumi.asia/wp-content/themes/kigurumi-ver2/js/height-feature.js'></script> |
[JavaScript]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
var AppViewModel = function() { var self = this; self.sex = ko.observable('male'); self.heightOfFather = ko.observable(); self.heightOfMother = ko.observable(); self.heightOfChild = ko.computed(function(data) { if( Number(self.heightOfFather()) > 0 && Number(self.heightOfMother()) > 0){ //男性 if( self.sex() == 'male'){ return (( Number(self.heightOfFather()) + Number(self.heightOfMother()) + 13)/2)+2; //女性 }else if( self.sex() == 'female'){ return (( Number(self.heightOfFather()) + Number(self.heightOfMother()) - 13)/2)+2; } } }); }; ko.applyBindings(new AppViewModel()); |
テンプレートとロジックが分離されるって良いですね。
ということで、Knockout.jsもゴリゴリ使って行こうと思います。
