住所から郵便番号を検索するものをKnockout.jsで作った

はじめに

APIからどうやったらJSONを引っ張ってきて、それをごにょごにょできるか試すために作りました。

郵便番号検索に使ったAPI
https://zipcoda.net/

サンプルサイトはここ
http://ayama.main.jp/Post-code.html

コード

HTML(Mainのみ)

<main>
    <form>
        <div class="addressInput">
            <input id="address" type="text" data-bind="value: address" placeholder="例）東京都千代田区永田町" />
            <button type="button" id="search" data-bind="click: searchPostCode">検索</button>
        </div>
        <div>
            <fieldset class="primaryPostCode">
                <legend>入力した住所の郵便番号</legend>
                <div data-bind="text: primaryPostCode()"></div>
            </fieldset>
        </div>
    </form>
</main>

Javascript(ViewModelのみ)

$(document).ready(function () {
    postCodeviewModel = (function () {
        var postCodeviewModel = function (initData) {
            var self = this;

            self.address = ko.observable();
            self.primaryPostCode = ko.observable();

            $("input").on("keydown", function (e) {
                if ((e.which && e.which === 13) || (e.keyCode && e.keyCode === 13)) {
                    return false;
                } else {
                    return true;
                }
            });
        }

        postCodeviewModel.prototype.searchPostCode = function () {
            var self = this;

            $.ajax({
                url: "http://zipcoda.net/api",
                dataType: "jsonp",
                data: {
                    address: self.address()
                }
            })
            .then(function (data) {
                self.primaryPostCode(data.items[0].zipcode);
            })
        }

        return postCodeviewModel;
    }());
}());

課題

• レスポンシブ対応を一応やったけど、知識不足感がある
• 最終的にJQueryだけでいいじゃんてものになったので、最初にちゃんと要件固めて、それに見合ったフレームワークを選定する力があるといいのかもしれない
• （デザインがださい）