knockout.jsでajaxでAPI叩いてモーダル表示分け - おじゃまぷよ系エンジニアメモ

とあるqueryパラメーターによって表示するモーダルの内容を変えるのをどうしようかと考えた結果
jQueryでajaxでAPIを叩いて、受け取ったレスポンスをKnockout.jsを使ってデータバインディングする形に落ち着いた。モーダルを１つふやすのに、api,js,htmlの３つのファイル修正加えないといけないけど、基本的にif文なり加えて増やせばいいだけなので
そんなに複雑にならないであろうと思っている。表示、非表示をもう少しうまく切り替えたいけど…

<html>
<head>
    <script src="knockout-3.4.0.js"></script>
    <script type="javascript">
        $(document).ready(function () {
            var showModal = function (param) {
                //paramによってどのモーダルを表示するかや、必要なパラメーターを返すapiを叩く
                $.ajax({
                    url: "/api/modal",
                    type: "GET",
                    contentType: "application/x-www-form-urlencoded",
                    data: {modal: param},
                    success: function (response) {
                        ko.applyBindings(getViewModel(response));
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        //エラーの場合はモーダルのhtmlをすべて非表示にする
                        var viewModel = new function () {
                        };
                        viewModel.modalType = "";
                        ko.applyBindings(viewModel);
                    }
                });
            };
            //apiのレスポンスによって取得するviewModelを変える
            var getViewModel = function (jsonResponse) {
                var viewModel = new function () {
                };
                viewModel.modalType = jsonResponse['modal_type'];

                if (viewModel.modalType == "modal1") {
                    viewModel.name1 = jsonResponse['name1'];
                    viewModel.image1 = jsonResponse['image_url1'];
                    //Modalを表示
                    openModal('#modal1');
                }
                if (viewModel.modalType == "modal2") {
                    viewModel.name2 = jsonResponse['name2'];
                    viewModel.image2 = jsonResponse['image_url2'];
                    //Modalを表示
                    openModal('#modal2');
                }
                return viewModel;
            };
            //queryパラメータの値を抽出する
            var getQueryParam = function (key) {
                var query = window.location.search.substring(1);
                var vars = query.split("&");
                for (var i = 0; i < vars.length; i++) {
                    var pair = vars[i].split("=");
                    if (pair[0] == key) {
                        return pair[1];
                    }
                }
            };
            var modalParam = getQueryParam("modal");
            if (modalParam) {
                showModal(modalParam);
            }
            else {
                //クエリーにmodalがなければモーダルすべて非表示にする
                ko.applyBindings(function () {
                    this.modalType = "";
                });
            }
        });
    </script>
</head>
<body>
<!-- ko if: modalType == "modal1" -->
<div>
    <img data-bind="attr: {src:image1}">
    <p data-bind="html:name1"></p>
</div>
<!-- /ko -->
<!-- ko if: modalType == "modal2" -->
<div>
    <img data-bind="attr: {src:image2}">
    <p data-bind="html:name2"></p>
</div>
<!-- /ko -->
</body>
</html>

モーダルを実際に表示するjsとcssはかけてないけど許して