新規投稿
フォローする

jQueryのテンプレート機能を利用する方法

jQueryのテンプレート機能(jQuery Templates)を利用したいのですが、kintone上での利用方法が分らず困っております。

通常、テンプレート機能を利用する場合、以下のようにテンプレートの定義を行いますが、
<script id="tooltipTemplate" type="text/x-jquery-tmpl">
<div>製品:${item.製品名}</div>
</script>
これを直接カスタマイズビューのHTML定義の中に入れた場合、$("tooltipTemplate")といった具合でテンプレート呼び出しができるものの、${item.製品名}の部分が、kintone側にHTMLエンコードされてしまい、そのまま文字列として表示されてしまいます。
(item.製品名がバインドされずに"製品:${item.製品名}"という文字が表示されるという事です。)

このテンプレート定義を外部ファイル化できれば良いのですが、その方法が分らず困っております。どなたかお力添えいただけませんでしょうか?

0

6件のコメント

Avatar
サクラエビ

山口さん

jQueryであれば、よくカスタマイズに利用するのですが、jQuery Templates
は用いてカスタマイズを行ったことがないので、参考になるか怪しいですが、
下記方法で出来なければ、仕様上動作が難しいのかもしれません。

「JavaScript / CSSでカスタマイズ」画面でjQuery Templates を
定義し、JS内で処理を実行する方法で動作しなければ、仕様上動作
が難しいのかもしれません。
jQuery Templates ではないですが、外部ライブラリの呼び出しとしては
下記ページのようなイメージですかね。

https://cybozudev.zendesk.com/hc/ja/articles/204982474
https://cybozudev.zendesk.com/hc/ja/articles/202640940

なお、カスタマイズビュー内で定義した場合、記載されいるように、scriptタグ内
で処理は動作しないかと思います。(確かinnerHTML仕様だった気がします)

1
Avatar
サクラエビ

私の方でも動作するか確認してみます。
jQuery Templates の利用方法を確認するところからになるので、
少しお時間がかかるかもですが。。。

0
Avatar
Yamaguchi K

サクラエビさん、コメントありがとうございます!

jQueryTemplatesについて、
<script id="tooltipTemplate" type="text/x-jquery-tmpl">
<div>製品:${item.製品名}</div>
</script>
のようなScriptタグを使った記述方法しか知らず、純粋なJavascript内で定義することができなかったため、何か良い方法がないかと思い投稿させていただいておりました。

サクラエビさんにコメントいただき再度調べたところ、以下の記事で書かれているようにJS内で定義できるようなので、「JavaScript / CSSでカスタマイズ」画面のほうでテンプレート定義できるかもしれません。
後ほど確認し結果を共有いたします。

0
Avatar
サクラエビ

山口さん

参考になったようでよかったです。
結果の共有いただければ、今後の参考にさせていただきます!
私の方でも、確認して何かありましたら共有いたします。

そして、最初のコメントが同じこと2回くらい言っていて見ずらい内容でしたね。。。

0
Avatar
Yamaguchi K

試したところ、文字列としてテンプレートを定義して利用することができました。
(とても単純な方法でした・・・)

var template = "テンプレートの文字列"

もう一つ分かったこととして、テンプレート内で"{item.製品名}"というように、日本語変数名をバインドするとjQueryTemplateが動作せずそのまま文字として表示されることも分かりました。基本中の基本ですが、kintoneから渡ってくる日本語変数(event.Recordsの中身)をものぐさしてそのまま使ってしまったのが良くなかったです。

サクラエビさん、ご協力ありがとうございました。

0
Avatar
サクラエビ

山口さん
うまく動作出来たようでよかったです!

0
サインインしてコメントを残してください。