とりあえず書きなぐる

とりあえず、マイノリティーなプログラムを極力説明せずに書きなぐります

ロケーションを移動してみる

シングルページとはいっても、やはりアプリケーションは複数のHTMLで構成されます

ロケーション移動メソッドを作成します
/Src/cm.ts

namespace cm {
    "use strict";

    /*
     * サイトのルート取得
     */
    let _siteRoot = "";
    export function getSiteRoot(): string {
        if (!_siteRoot) {
            let scripts = document.getElementsByTagName("script");
            let i = scripts.length;
            while (i--) {
                let match = scripts[i].src.match(/(^|.*\/)cm\.js*/);
                if (match) {
                    _siteRoot = match[1] + "../";		// cm.jsの場所からルートを設定
                    break;
                }
            }
            let emt: HTMLAnchorElement = <HTMLAnchorElement>$("<a>").attr("href", _siteRoot).get(0);
            _siteRoot = emt.href;
        }
        return _siteRoot;
    }

    /*
     * ロケーション移動
     */
    export interface PostData {
        [index: string]: string | number;
    }

    export function changeLoacation(url: string, data?: PostData) {
        // オフライン
        if (isOffline() === true) {
            return;
        }
	if (!url) {
		url = "";
	}

        url = getSiteRoot() + url;
        if (data) {
            // POST
            let f = $("<form/>", { "action": url, "method": "post", "target": "_self" });
            for (let key in data) {
                if (key) {
                    f.append($("<input/>", { "type": "hidden", "name": key, "value": data[key] }));
                }
            }
            f.appendTo(document.body);
            f.submit();
            f.remove();

        } else {
            // GET
            location.replace(url);
        }
    }

    ....

}

トレイリングスラッシュ対策としてgetSiteRoot()内で"cm.js"の場所を基準にしてルートのURLを取り直しています
サーバー側の設定次第なのでしょうが、念のため
基準とするファイル名、フォルダ構成によっては修正が必要です
大抵の場合GETで間に合うのですが、POSTも用意しておきます
Key-Valueで値が渡された場合はFORMを作成してsubmit()でPOSTしています
(FORMはBodyに追加する必要があるかもしれません)

サンプルです
/Src/mobile.ts

	/*
	 * ツールバーボタン押下
	 */
        $(document).on("click", "#page1_toolbar1 .ui-btn, #page1_toolbar2 .ui-btn", function (event: Event) {
            let cmd = $(this).attr("cmd");
            switch (cmd) {
                case "home":
                    cm.changeLoacation("home");
                    break;

                case "table":
                    cm.changeLoacation("table");
                    break;
            }
        });

/Views/Mobile/Index.vbhtmlでツールバーにidを付け、適当なボタンにcmd属性を追加してやります