【Elixir】Phoenix のテンプレートエラー「expected closing `"` for attribute value」の解決方法
Elixir PhoenixでのHTMLエラー「expected closing " for attribute value」の解決方法
Elixir Phoenix のテンプレートエラー「expected closing " for attribute value」が出てしまった時の解決方法。
確認環境
- Elixir 1.14.2
- Phoenix 1.6.3
エラーコード
Elixir PhoenixフレームワークでWebアプリケーションを開発している際、以下のようなHTMLテンプレートコードでエラーが発生する時があります。
<div style="<%= "color:red" %>">TEST</div>以下のようなエラーコードが発生します。
expected closing " for attribute value
エラーの原因
<%= hoge %> をダブルクォーテーションで囲うと正しく補完が働かなくてHTMLが壊れる模様です。
Use of phx-value-ref - Phoenix Forum / Questions / Help - Elixir Programming Language Forum
対処方法
対処方法は2つ
{}を使う
Elixir コードは <% %> 以外に {} でも使用することが可能です。
またブロック {} の中で変数を {#{hoge}} のようにすると変数が使用可能になります。
<div style={"color:red"}>TEST</div>
<% color = "red" %>
<div style={"color:#{color}"}>TEST</div>式を変数に格納する
事前にElixirの式の結果を変数に格納し、その変数を使用します。 対応している方はキーワードリスト、またはマップです。
<% attributes = [style: "color:red"] %>
<div {attributes}>Kyeword List</div>
<% attributes = %{style: "color:red"} %>
<div {attributes}>Map</div>