ロケーションを移動してみる
シングルページとはいっても、やはりアプリケーションは複数の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属性を追加してやります