javascript - th：inlineを使用せずにJavaScriptへの変数式

Question

私は最初に検索しましたが、Thymeleafを初めて使用し、せいぜいjavascriptが素人であるため、紛らわしい答えを見つけました。

JSPのように、変数式をjavascript関数に渡す方法を知りたいだけです。

<a href="#" onclick="javascript:getContactId('${contact.id}');">Button</a>

もちろん、これはThymeleafで失敗し、値の代わりに文字列$ {contact.id}を渡すので、代わりに変数式の値を取得するにはどうすればよいですか？

このようにしたい理由は、によって繰り返されている行に依存するためth:eachです。

を使用する以外に方法がない場合th:inline、上記のステートメントを考慮した最善のアプローチは何ですか？

score 29 · Accepted Answer

これはうまくいきました：

th:onclick="'javascript:getContactId(\'' + ${contact.id} + '\');'"

score 6 · Accepted Answer

Thymeleafバージョン2.1では、受け入れられた回答を機能させることができませんでした。ThymeleafのTwitter投稿からいくつかのガイダンスを見つけました。を使用するのではなく、その中でonclick属性th:onclickを使用して指定します。th:attr

th:attr="onclick='javascript:getContactId(\'' + ${contact.id} + '\');'"

score 0 · Accepted Answer

javascript変数をonclickまたは他のDOM属性に入れることはできません。onclickまたはその他のDOM属性は、定数文字列である必要があります。

ただし、次のように、JavaScriptからonclick属性の値を動的に変更できます。

yourDomElement.onclick = anyVariable;

score 0 · Accepted Answer

あなたはこれを次のように行うことができます：

th：onclick = "'javascript：getContactId（\''+ $ {contact.id} +'\'）;'"

score 0 · Accepted Answer

より一般的なアプローチ。JSでイベントハンドラーパラメーターとして渡されないものが必要な場合：

th:attr="data-myValueFromThymeleaf=${contact.id}"

名前がdata-で始まる属性は、すべてのブラウザで無視されます。したがって、UIには影響せず、JavaScriptで値を簡単に読み取ることができます。

javascriptコードをhtmlに入れるのは理想的ではないのでこれを好みます（控えめなjavascriptを参照）

score 0 · Accepted Answer

TwitterでThymeleafプロジェクトに質問しましたが、その答えは次のとおりです。

「+」演算子またはリテラル置換の両方を使用できます。例えば：<a th:href="|javascript:change('start','${taskId}')|">

試してみましたが、うまくいきます〜

6 に答える 6