読者です 読者をやめる 読者になる 読者になる

kurukuru-papaのブログ

主に、ソフトウェア開発に関連したメモを書き溜めたいと思います。

Teeda タグの非表示(te:omittag="true")使用時の注意点

Teedaを使用して、ある条件の場合に、画面レイアウトの一部を表示しないということを行いました。これには、te:omittag属性を使用すればよいということはすぐわかったのですが、次のような場合は注意が必要なようです。

問題となった例

<div id="isLogin" te:omittag="true">
〜loginプロパティ有効時の内容1〜
</div>

〜固定表示内容1〜

<div id="isLogin" te:omittag="true">
〜loginプロパティ有効時の内容2〜
</div>

〜固定表示内容2〜

<div id="isLogin" te:omittag="true">
〜loginプロパティ有効時の内容3〜
</div>

〜固定表示内容3〜

loginプロパティがtrueの場合だけ、「loginプロパティ有効時の内容1〜3」を表示しようとして、上記のように記述しました。すると何となく動作はするのですが、「loginプロパティ有効時の内容2、3」は、「loginプロパティ有効時の内容1」の直後に出力されてしまいました。

対応方法

idには同じ値を指定したらダメということのようです。単純に、HTMLのid属性というものを考えると、id属性はタグを識別するためのものだから、当たり前かもしれません。私は、Teedaのid記述を、Pageクラスのプロパティを指定するものとだけ考えてしまい、プロパティは何度も呼んでもよいだろうと思いこんで、複数のタグに同じid(="isLogin")を指定してしまいました。

次のようにidをユニークにして記述することで、意図通り表示できました。

<div id="isContent1" te:omittag="true">
〜loginプロパティ有効時の内容1〜
</div>

〜固定表示内容1〜

<div id="isContent2" te:omittag="true">
〜loginプロパティ有効時の内容2〜
</div>

〜固定表示内容2〜

<div id="isContent3" te:omittag="true">
〜loginプロパティ有効時の内容3〜
</div>

〜固定表示内容3〜

動作確認環境