innerHTML は文法にうるさい。

JavaScript Template(JST) を使って、HTML中に直接テンプレートを記述する方法

は問題がありました。

記述したテンプレートを innerHTML として取得すると、

ブラウザがそれぞれ勝手な解釈をして「正しい」html に書き直そうとします。

結果、少なくとも以下の問題が発生します。

• 不等号が htmlentities に変換される

{if hoge>2}${hoge}{/if}

みたいな非常によくある if 文が、

{if hoge < 2}${hoge}{/if}

↑こうなって parse error。

ただ、これくらいならソース弄って 置換してやれば問題ないです。

• table のloop とか、実質無理。

<table>

{for val in data}

  <tr><td>{val.title}</td><td>{val.value}</td></tr>

{/for}

</table>

↑こんなことしてテーブル出力したいじゃないですか。

でも、IE 様の innerHTML は </tr>と<tr>間の記述を無視してくれます。

そんな IE 様でも動かすにはこんな感じ

<table>

<!--{for val in data}-->

{for val in data}

  <tr><td>{val.title}</td><td>{val.value}</td></tr>

{/for}

<!--{/for}-->

</table>

IE様 では innerHTML でも comment は 無視されない。

firefox では、innerHTML では comment は無視される。

こういうの、hack っていうの？

やってられるかっつうの。

ie、バーカ。バーカバーカ。

で、結局推奨通り 見えない textarea に入れて、value を取得することになるわけですが、

それじゃ意味ねえのよ。

デザイナさんと共同作業したいから、本来あるべきところにあってほしいわけで。

textarea に入れるくらいなら、その意味では、使わない方がマシ。

javascript でチマチマ html 組み立てる手間は省けるけどさー。

サーバサイド javascript って、そういえば昔あったなー。

それで何とかなるのかな。とも思ったけど、もう心が折れました。