ejsテンプレートのPathについて
清水
元々、コンテキストルートからの絶対パスで
「/コンテキスト名/ejsファイルまでの階層/XXXX.ejs」
と記載して開発していました。
その他の記載方法が分からず、この方法を採用していました。
異なることがわかり、開発環境⇔サーバーと切り替える度にコンテキスト名を
書き換えるのも良くないと思い、正しい記載方法を理解したく質問しました。
もしくは、コントローラ内でコンテキスト名を動的に取得し、ejsのテンプレートの
Pathへ反映させることは可能でしょうか？
shimoda....@jp.nssol.nssmc.com
清水さん
しもだと申します。
先に結論を申し上げますと
hifive ver.1.2で追加した”res”(リソース)モジュールをご利用いただくと
よいかと思います。
＜サンプルコード＞
============
(function(){
//他のファイルを検索するときのルートURLを(コンテキストルートを含め絶対パスで)指定する。
//この設定は、実際には別の(各JSPで共通に読み込まれる)JSファイルに記述しておく。
//環境によってコンテキストルートなどが変わる場合、
//このbaseUrlを一か所のみ書き換えればよい。
//(あるいは、環境毎に(異なるbaseUrlがかかれた)JSファイルを用意しておき
// JSP等で実際にクライアントが読み込むJSファイルを切り替える、等の方法でもよい。)
h5.settings.res.baseUrl='/ctxRoot/src';
var sampleController = {
__name: 'sample.SampleController',
// h5.res.dependsOn()でEJSファイルを指定する。
// 複数のEJSファイルを読み込む場合は配列で指定する
// (1つであれば配列にせず dependsOn(‘tmpl.ejs’) のように書ける)
// 下記の場合、baseUrlと合わせて “/ctxRoot/src/template/sample1.ejs” というURLで
// EJSファイルを取得しに行く
__templates: h5.res.dependsOn(['template/sample1.ejs', 'template/sample2.ejs']),
__ready: function(){
this.view.append('.textArea', 'sampleTmpl1');
this.view.append('.textArea', 'sampleTmpl2');
}
}
h5.core.controller('.sample', sampleController);
})();
============
詳細はこちらをご参照ください。
https://www.htmlhifive.com/conts/web/view/reference/resource-spec#Hejs30D530A130A430EB306E89E36C7A
なお、h5.res.dependsOn()と何度も書くのが面倒な場合は、
var dependsOn = h5.res.dependsOn;
と先頭に書いておくと
(function() {
var dependsOn = h5.res.dependsOn;
var sampleController = {
__name: 'sample.SampleController',
//ここでは単に dependsOn()と書ける
__templates: dependsOn(['template/sample1.ejs', 'template/sample2.ejs']),
};
)();
ので、何度も書く場合には少し記述が楽できるかと思います。
＜参考＞
EJSテンプレートのパスについて、
テンプレートのパスをコントローラに
var myController = {
__name: ‘sample.MyController’,
__templates: ‘template/tmpl.ejs’
};
のように直接文字列で（かつ相対パスで）記述した場合、
EJSファイルのパスは表示しているページ(HTML)のパスが基準となります。
ver.1.1までだと
var TEMPLATE_BASE_URL = ‘/context-root/src/’; //別の共通JSファイルで定義
var controller = {
__templates: TEMPLATE_BASE_URL + ‘templates/tmpl.ejs’
};
のようにする方法がありましたが、
（ご指摘の通りパスが完全にJSファイルに埋め込まれてしまうので使いづらいという声もあり）
EJS以外のファイルを含め動的にロードする方法を統一するため、
ver.1.2でリソース管理機能を追加しました。
返信が遅くなり失礼しました。
また不明点、困ったことなどあればお気軽にお問い合わせください。
よろしくお願いします。
--
このメールは Google グループのグループ「hifive User Group」に登録しているユーザーに送られています。
このグループから退会し、グループからのメールの配信を停止するには hifive-users...@googlegroups.com
にメールを送信してください。
このグループに投稿するには hifive...@googlegroups.com
にメールを送信してください。
https://groups.google.com/group/hifive-users
からこのグループにアクセスしてください。
その他のオプションについては https://groups.google.com/d/optout
にアクセスしてください。
This e-mail and any attachments are intended only for
the named addressee(s) and may contain confidential information.
If you have received this e-mail in error, please delete
the e-mail and any attachments and notify the sender immediately.
If you are not the intended recipient, any disclosure, copying,
printing, transmission or distribution of, or any action taken
in reliance upon, the information contained in this e-mail and
any attachments is strictly prohibited.
このメール及び添付資料には機密情報を含む場合があります。
本メールにお心当たりのない場合は、速やかに破棄頂くとともに、
送信元へその旨ご連絡ください。また、本メール及び添付資料に
ついては、一切の開示、複写、配布、その他の利用、または、
記載内容に基づくいかなる行動もされないようにお願いします。
*****************************************************************
清水
2016年6月16日木曜日 11時49分18秒 UTC+9 simdy:
shimoda....@jp.nssol.nssmc.com
清水さん
しもだです。
前提として、「コンテキストルート」はJavaEEにおける概念のため、
純粋なブラウザのURLだけからでは
パスのどこ（どこまで）がコンテキストルートかどうかはわかりません。
従って、パスを相対化しつつその起点を/、あるいは表示しているページのパスなど
一意に特定出来る場所以外に動的に指定する場合、
どこが起点か（＝baseUrl）はなんらか指定する必要があります。
>動的には取得できない
画面(HTML)を例えばJSPで組み立てている場合
<%= request.getContextPath() %> でコンテキストルートを取得できます。
以下のようなスクリプトコードを、h5.jsを読み込むスクリプトタグの前に
JSP内に書いておくと、
クライアントに返されるHTMLでは3行目が
「h5.settings.res.beseUrl = '/context-root/src';」
のようになり、動的に設定できます。
-------------
●sample.jsp
<%-- contextPath変数にコンテキストルートを入れておく --%>
<c:set var="contextPath" value="${pageContext.request.contextPath}"/>
…
<script>
//h5.jsが読み込まれる時にh5preinitイベントが起きるので、
//その際にsettingsにbaseUrlをセットする
$(document).bind('h5preinit', function() {
h5.settings.res.beseUrl = '${contextPath}/src'; //JSPが実行されると${contextPath}の部分が実際のコンテキストルートに置換される
};
});
</script>
<script src=”lib/hifive/h5.js”></script>
-------------
上の例ではHTML内に埋め込む場合で説明しましたが、
特定の(共通で読み込まれる)JSファイルに対して同様のことを行うことも可能だと思います。
>モジュールによってURLの階層（コンテキストルート以下）が異なることがあれば
意図を汲めていないようでしたらご指摘いただければと思いますが、
baseUrl以下のパス階層は任意ですので、それぞれ適当なパスを指定できます。
/context-root/common/sub/tmpl.ejs
module2/screen2.ejs
の場合：
h5.settings.res.baseUrl = ‘/context-root’; //前述の方法で動的に設定
としておき
module1Controller = {
__templates: h5.res.dependsOn(‘common/sub/tmpl.ejs’);
};
module2Controller = {
__templates: h5.res.dependsOn(‘module2/screen2.ejs’);
};
のように記述可能です
清水
大変お忙しい所 申し訳ありませんが、よろしくお願いいたします。
2016年6月16日木曜日 13時50分25秒 UTC+9 simdy:
shimoda....@jp.nssol.nssmc.com
清水さん
しもだです。
>h5.settings.res.beseUrl = '<%= request.getContextPath() %>/';
h5.settings.res.baseUrl
でした。（b”e”se -> b”a”se）
# 私の書いたコードがtypoしていました。すみません。
b”a”seUrl にすれば、大丈夫かと思います。
清水
2016年6月16日木曜日 17時15分57秒 UTC+9 simdy: