web-dev-qa-db-ja.com

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

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

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

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

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

この方法が必要な理由は、th:eachによって繰り返される行に依存するためです。

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

javascriptthymeleaf
11
Nimchip

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

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

Thymeleafフォーラムに感謝します： http://forum.thymeleaf.org/variable-expression-into-javascript-without-using-th-inline-td4025534.html

29
Nimchip

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

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

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

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

0
user3029929

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

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

yourDomElement.onclick = anyVariable;
0
Archer

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

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

詳細情報： https://www.thymeleaf.org/doc/articles/standarddialect5minutes.html

試してみましたが動作します〜

0
Jason Wong

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

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

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

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

0
GabiM