Dreamweaverテンプレ使いがいきなりEJSを使い始めました。
今までよくやってた↓のようなやり方をEJSでやるのに何故か手間取ること約2時間・・。
@@@((current=='hoge')?'<li class="current">':'<li>')@@@
忘れないように、うまくいったパターンを書きつつ復習します。
事前情報
構造について
root/
├ index.ejs
└ include/
└-header.ejs
index.ejsが表示側、-header.ejsがグロナビのソースが記述されているインクルード用テンプレートです。
おおまかな作りについて
- 表示側から-header.ejsをインクルードする
- インクルードする際に、currentパラメータを受け渡す
- -header.ejs内で、受け取ったcurrentパラメータによって表示を条件分岐
構想自体はシンプルです。
実装方法
index.ejs
<%- include('./include/common/-header.ejs',{current:'home'}); %>
-header.ejs
<% if (typeof current === 'undefined') { var current = ''; } %>
<div class="home <%- current === 'home' ? 'current' : '' %>"><a href="/"><span>home</span></a></div>
こんだけです。
つまづいたポイント
EJSのスクリプトを記述する「<% %>について」
いくつか種類があります。
今回は<% include(と書いていたがためにエラーとなっていました。。
<% %>
内側にJavaScriptが記述できる。
HTMLは出力されないので、変数の宣言やif文を書くのに使う。
<%- %>
内側にJavaScriptが記述できる。
実行結果をHTMLとして展開する。
<%= %>
中の変数の値をエスケープして展開する。
var current = '';について
-headerの一行目のこれです。
<% if (typeof current === 'undefined') { var current = ''; } %>
表示側のテンプレートがindex.ejs以外にも存在し、そちらは-headerのインクルードを↓のように記述していました。
<% include ./include/common/-header %>
要するに、パラメータの受け渡しがあるパターンとないパターンが混在していてエラーを招いたみたいです。
表示側のテンプレートを全てパラメータを送るように修正すれば動くはずですが、さすがに骨が折れるので、値が存在しない場合は空の変数を用意するようにしてエラーを回避しました。
三項演算子について
リファレンスがなかなか見つけられず困っていましたが、普通に使えました！
<%- current === 'home' ? 'current' : '' %>
クラスの付け替えくらいならシンプルに書けて良いですね。
感想
EJSまだ使い始めで勝手が全然わかりませんが、テンプレートのインクルードができるのはやはり便利ですね。
Dwテンプレは記述がアプリケーションに制限される上にソースが汚れるので、こっちで慣れていけたらいいなと思います。
Pugと違って普通にHTMLが記述できてとっつきやすさはありますが、リファレンスが少ないため今回みたいに何かにつまづいたときはちょっと大変かもです。
諦めてJSで実装しちゃおうかな・・とも思っていたのですが、なんとか解決できてよかったです。