- 2008年11月30日 21:15
- しらべる
Javascriptのテンプレートエンジン、jTemplatesを使っています。 ちょっとはまったとこをメモ。
jTemplatesの#foreachの中で、もともとテンプレートに渡されたdataのループオブジェクト以外の参照をしたいときが、あります。
代表的なのはコンボボックスのデータのセットとかです。
普通の感覚でやろうとすると、いきなりツマづきます。
sample.js
var data = {
optionCode : 2
optionMap : {
1 : "あああ",
2 : "いいい",
3 : "ううう"
}
};
$("#form").setTemplateURL("select.tpl");
$("#form").processTemplate(data);
select.tpl
....
<select>
<option{#if $T.optionCode}{#else} selected="selected"{#/if}>選択してね</option>
{#foreach $T.optionMap as option}
<option value="{$T.option$key}"{#if $T.option$key == $T.optionCode} selected="selected"{#else}{#/if}>{$T.option}</option>
{#/for}
</select>
...
選択値(optionCodえがある場合、selectedにするように処理したいのだけど、
$Tの参照はスコープによって変わってしまうようで、
foreachを出るまで、$TはoptionMapのイテレーターオブジェクトのようなものになってしまっています。
このため、foreach中の$T.optionCodeはundefinedとなり、選択値をセットできません。
なので、foreachに入る前に選択値を変数として保持しておく必要があります。
jTemplatesでは、テンプレート中の任意の場所で{#param}を定義することで、
変数を保持しておくことができます。
定義した変数は$Pで参照します。
<select>
<option{#if $T.optionCode}{#else} selected="selected"{#/if}>選択してね</option>
{#param name=optionCode value=$T.optionCode}
{#foreach $T.optionMap as option}
<option value="{$T.option$key}"{#if $T.option$key == $P.optionCode} selected="selected"{#else}{#/if}>{$T.option}</option>
{#/for}
</select>
こうすることで、foreach内でも、もともと渡されたdataを参照することができました。
っていうか他に方法ないのかな。。
