本家？ブログ「将来どれくらいの身長になるのか？両親の背丈から予測身長を計算する」で、Knockout.jsで予測身長フォームを作ってみました。

Knockout.jsを最近、仕事でも使っているのです。

MVVMでは、AngularJSをしばらく勉強していました。しかし、AngularJSはver1.3からIE8がサポート外。ver2から記法が全然別ものになるってのを知って、「まだAngularJSは、良いや…」って気持ちになって、Knockout.jsに変更したのです。

Knockout.jsいいですねー。マイクロソフト製だから、IEもサポートだし。jQueryとも共存できすし、実践でも導入しやすいです。

ということで、予測身長フォームのコードです。

[HTML]

<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]

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もゴリゴリ使って行こうと思います。