5

Web ページのさまざまな部分でネストされたテンプレートを使用したいと考えています。さまざまな部分について、ネストされたテンプレート内の配列から値を取得する必要があります。各パーツのクラスと Web サイト上の位置が異なるため、for ループを使用できません。ネストされたテンプレートに変数を渡すことは可能ですか? 次のコードは、私が達成しようとしていることを簡素化します。

<script id="myBtnTmpl" type="text/x-jsrender">
    <button class="btn">        
        {{:myData.myArray[INDEX_VARIABLE].btnName}}
    </button>
</script>

//  Here I want to use INDEX_VARIABLE = 0
<div class="BigButton">
    {{if myData tmpl="myBtnTmpl"/}}
</div>

//  Here I want to use INDEX_VARIABLE = 1
<div class="MediumButton">
    {{if myData tmpl="myBtnTmpl"/}}
</div>

//  Here I want to use INDEX_VARIABLE = 2
<div class="SmallButton">
    {{if myData tmpl="myBtnTmpl"/}}
</div>

別の質問: ネストされたテンプレートを使用する場合、この {{tmpl="myBtnTmpl"/}} のようなネストされたテンプレートを if 構文なしで含めることは可能ですか?

ありがとう！

4

1 に答える 1

7

はい、使用しているタグに名前付きテンプレート パラメータを設定できますtmpl="myBtnTmpl"({{if}}タグかタグかに関係なく{{for}})。

<div class="BigButton">
    {{for myData ~arrIndex=0 tmpl="myBtnTmpl"/}}
</div>

次に、登録済みのヘルパーにアクセスするのと同じ方法で、名前に「~」を追加して、テンプレート パラメーターにアクセスできます。

<button class="btn">        
    {{:myData.myArray[~arrIndex].btnName}}
</button>

ちなみに、(データに加えて) 変数とヘルパー関数を render メソッドで渡すこともできます。それを示す新しいサンプルデモを追加しました。

これが意味することは、テンプレートをコードからレンダリングする場合でも、上記のネストされたテンプレートのように宣言的にレンダリングする場合でも、同様にテンプレートを「パラメータ化」できるということです。

于 2012-07-05T03:46:55.220 に答える