tplからjavascriptに変数の値を渡すにはどうしたら良いか

Question

■test.tpl

{capture name=testname}{$lists[idx1].test_list[idx2].testname}{/capture}

■test.js（受けてのjavascript側）

console.log(testname);

として受けてのjavascript側で表示させるにはどのようにしたらいいでしょうか？

ご教示いただきたくお願い致します。

Answer 1

自信ありませんが。。

console.log({$smarty.capture.testname});

外部ファイルなら

<script src="test.js" id="testjs" data-foo="{$smarty.capture.testname}"></script>

で、$('#myjs').data('foo')とかでダメですかね。。

Comments

[kumakumatan]

ご回答ありがとうございます。
「外部ファイルなら」の説明をもう少し詳しくご説明していただけないでしょうか。
「test.tpl」側に「<script src="test.js" id="testjs" data-foo="{$smarty.capture.testname}"></script>」と記載するのでしょうか？

ちなみに、「test.js」側で「console.log({$smarty.capture.testname});」
としても「Uncaught SyntaxError: Unexpected token 」と表示されてしまいました。

宜しくお願いします。

[mayoi_maimai]

<script src="test.js" id="testjs" data-foo="{$smarty.capture.testname}"></script>
上記記述はtest.tplで大丈夫です。

右クリック→ソース等で{$smarty.capture.testname}に設定した変数が渡っているかをご確認頂き、
test.jsで以下の記述で出力されると思います。

$(function(){
console.log( $('#testjs').data('foo') );
});

[kumakumatan]

ご回答ありがとうございます。
値が空の状態になってしまってます。
「{$smarty.capture.testname}」は配列の値なのですが、配列でもご教示いただいた内容で
取得できますでしょうか？

[mayoi_maimai]

配列ですか。。
配列なら一旦JSONとかに変換するかちょっと強引かもですが以下のような感じで配列をばらしてもokかと思います。
<script src="test.js" id="testjs"
{foreach from=$smarty.capture.testname key=key item=item}
data-{$key}="{$item}"
{/foreach}
>
</script>

[kumakumatan]

ご回答ありがとうございます。
現在のテンプレートファイル（test.tpl）にて既存で、

<script type="text/javascript">
<!--
var test_no = '{$test_no}';
var test_page_no = '{$test_page_no}';
-->
</script>

と記載がされている場合、この中に埋め込むにはどうしたら良いでしょうか？

宜しくお願いします。

[mayoi_maimai]

</script>の下で大丈夫だと思います。
$smarty.capture.testnameがどのような配列かわからなかったため
data-{$key}="{$item}"としましたが、多元配列等になっているのであれば適宜修正していただければ大丈夫かと思います。

[kumakumatan]

ご回答ありがとうございます。
data-{$key}="{$item}"
はどういう処理内容になりますでしょうか？

[mayoi_maimai]

配列の中身を出す処理ですね。
$smarty.capture.testnameの配列が以下のような場合だと

$smarty.capture.testname['foo'] = 10;
$smarty.capture.testname['hoge'] = 20;

data-foo="10"
data-hoge="20"
といった形式で出力されます。
そしてjs側でdata-fooの「10」という値を$('#testjs').data('foo')で取得できます。

[kumakumatan]

ご回答ありがとうございます。
js側で「$smarty.capture.testname」の何番目（i）の値をとりたく思っています。
その場合はどうしたらよろしいいでしょうか？
宜しくお願いします。

[mayoi_maimai]

基本的には同じ記述で大丈夫です。
配列の中身が以下のような感じですと

$smarty.capture.testname['1'] = 10;
$smarty.capture.testname['2'] = 20;

この記述を追記すると
<script src="test.js" id="testjs"
{foreach from=$smarty.capture.testname key=key item=item}
data-{$key}="{$item}"
{/foreach}
>
</script>

このようになるはずです。

<script src="test.js" id="testjs"
data-1="10"
data-2="20"
{/foreach}
>
</script>

1番を取得する時は
$(function(){
　　console.log( $('#testjs').data('1') );
});

2番目を取得するときは
$(function(){
　　console.log( $('#testjs').data('2') );
});
といった感じになります。

[kumakumatan]

ご回答ありがとうございます。
やってみましたが、

■test.tpl側

<script type="text/javascript">
<!--
var test_no = '{$test_no}';
var test_page_no = '{$test_page_no}';
-->
</script>

<script src="test.js" id="testjs"
{foreach from=$smarty.capture.testname key=key item=item}
data-{$key}="{$item}"
{/foreach}
>
</script>

■test.js側

console.log( $('#testjs').data('1') );

としても「undifined」となってしまいます・・。
「test.tpl側」の開発者コンソールで「Sources」の値を確認してもデータ
が入ってきてませんでした・・。
記述場所などが違うのでしょうか？

宜しくお願いします。

[mayoi_maimai]

記述場所はtest.tplのcaptureで値をセットしている場所より下ですね。

まず$smarty.capture.testnameにちゃんと値が入っているかを確認した方がいいですね。
test.tpl内で{$smarty.capture.testname|@var_dump}とすると中身が見れるのですがどんな値が入っていますか？

[kumakumatan]

{section name=idx2 loop=$lists[idx1].test_list}
{capture name=testname}{$lists[idx1].test_list[idx2].testname}{/capture}
{$smarty.capture.testname}
{/section}

としたら値が入っています。

[mayoi_maimai]

値が入っているのであればkey名が間違っているのだと思います。
{section name=idx2 loop=$lists[idx1].test_list}
{capture name=testname}{$lists[idx1].test_list[idx2].testname}{/capture}
{$smarty.capture.testname|@var_dump}
{/section}
とするとkey名と値が表示されますので、取得したいkey名をjs側で指定してみてください。

// js側
console.log( $('#testjs').data('key名') );

[kumakumatan]

ここでいう「'key名'」って「$smarty.capture.testname」
の事でしょうか？

[mayoi_maimai]

いえ、そういうことではなくて。。
中身を見た方が早そうなので、以下の出力結果を教えて頂けますか？

{$lists[idx1].test_list|@var_dump} // この部分と

{section name=idx2 loop=$lists[idx1].test_list}
{capture name=testname}{$lists[idx1].test_list[idx2].testname}{/capture}
{$smarty.capture.testname|@var_dump}　//　この部分
{/section}

[kumakumatan]

すいません。
「{$smarty.capture.testname|@var_dump}」としたら
「正常値NULL」
と表示されてしまいます・・。

宜しくお願いします。

[mayoi_maimai]

データが無いみたいですね。。

{$lists[idx1].test_list|@var_dump}
の方はいかがでしょうか？

[kumakumatan]

array(2){[0]=>array(3){["test"]=>string(24)・・・}}
と値は入っているようです。

[mayoi_maimai]

{section name=idx2 loop=$lists[idx1].test_list}
{capture name=testname}{$lists[idx1].test_list[idx2].testname}{/capture}
{$smarty.capture.testname}
{/section}

上記で{$lists[idx1].test_list[idx2].testname}部分に値はでているのですよね。
では上記記述の下あたりに以下を追加してみていただけますか？

<script src="test.js" id="testjs"
{section name=idx2 loop=$lists[idx1].test_list}
data-{$smarty.section.idx2.index}="{$lists[idx1].test_list[idx2].testname}"
{/section}
>
</script>

そうすると
data-{$smarty.section.idx2.index}="{$lists[idx1].test_list[idx2].testname}"部分に
data-0='値'
といった形で出力されるはずです。
※データが複数ある場合はdata-0='値'、data-1='値'、data-2='値'…となるはずです。

で、js側で取れるはずなのですが。。

$(function(){
console.log( $('#testjs').data('0') );
});

[kumakumatan]

何度もありがとうございます。

data-{$smarty.section.idx2.index}="{$lists[idx1].test_list[idx2].testname}"
の「testname」は「capture name=testname」の「testname」ではなく、
「{$lists[idx1].test_list[idx2].testname」の「testname」でいいのですよね？

データ件数は４件で合っているのですが値が入ってこないです・・。

<script src="test.js" id="testjs"
data-0=""
data-1=""
data-2=""
data-3=""
>
</script>

ご教授、宜しくお願いします。

[mayoi_maimai]

大元となる配列を参照するので「{$lists[idx1].test_list[idx2].testname」で大丈夫です。
おそらく配列の参照している位置が誤っていると思うので、差し支えなければ以下の出力結果の【全て】をご教授いただけますか？

{$lists[idx1].test_list|@var_dump}

[kumakumatan]

何度もすいません。
array(3){[0]=> array(3){["変数名1"]=> string(24)"変数1の値"["変数名2"]=>string(12)"変数2の値"["変数名3"]=>string(18)"変数3の値"}[1]=>array(3){["変数名1"]=>string(18)"変数１の値"["変数名２"]=>string(12)"・・・
のように出力されています。
データが４件あるのですが、４行同じものが出力されています。

宜しくお願いします。

[mayoi_maimai]

こちらこそ何度もすみません。。
2元配列になっているようなので以下のような感じでいかがでしょうか。
変数名の部分に出力したい変数名を指定してみてくださいm(__)m

<script src="test.js" id="testjs"
<!--{foreach from=$lists[idx1].test_list key=key item=item}-->
data-{$key}="{$item.変数名}"
<!--{/foreach}-->
>
</script>

[kumakumatan]

ありがとうございます。
tpl側をご指示いただいたようにして、
js側を
console.log( $('#testjs').data('0') );
としたのですが、「undefined」と表示されてしまいます・・。

[mayoi_maimai]

tpl側の出力もダメな感じでしょうか？
undefinedだとおそらく値が無いので以下のような出力になっていると思います。

<script src="test.js" id="testjs"
data-0=""
data-1=""
data-2=""
data-3=""
>
</script>
上記のようになっているのであれば変数名の間違いとかが考えられます。

正しくは以下のようになるので、出力させたい変数名を｛$item|@var_dump}等で確認してみると良いと思います。
<script src="test.js" id="testjs"
data-0="値"
data-1="値"
data-2="値"
data-3="値"
>
</script>