javascript - JsRender: How to pass variables into a nested template - Stack Overflow

admin管理员组

文章数量:1311065

I want to use a nested template in different parts of my webpage. For the different parts I need to get a value from an array within the nested template. I cannot use a for loop because each part has different class and position on the website. Is it possible to pass a variable into the nested template? The following code simplifies what I am trying to achieve:

<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>

Another question: When using nested templates is it possible to include nested templates like this {{tmpl="myBtnTmpl"/}} without the if syntax?

Thanks!

I want to use a nested template in different parts of my webpage. For the different parts I need to get a value from an array within the nested template. I cannot use a for loop because each part has different class and position on the website. Is it possible to pass a variable into the nested template? The following code simplifies what I am trying to achieve:

<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>

Another question: When using nested templates is it possible to include nested templates like this {{tmpl="myBtnTmpl"/}} without the if syntax?

Thanks!

• javascript
• jquery
• jsrender

Share Improve this question Follow asked Jul 4, 2012 at 8:17 doormandoorman 17k2222 gold badges9595 silver badges161161 bronze badges 2

• For second question, {{for myData tmpl="#myBtnTmpl"/}} But totally don't understand your original question.. – Willy Commented Jul 4, 2012 at 9:02
• Anyway, according to the title, I think you can have a reference at github./BorisMoore/jsrender/blob/master/demos/step-by-step/… – Willy Commented Jul 4, 2012 at 9:09

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

Yes, you can set named template parameters on the tag where you are using tmpl="myBtnTmpl" (whether that be an {{if}} tag or a {{for}} tag):

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

Then you can access the template parameter in the same way you would access a registered helper - by appending '~' to the name.

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

Incidentally, you can also pass variables and helper functions (in addition to the data) with the render method. I just added a new sample demo showing that.

So what this means is that templates can be 'parameterized' similarly whether you are rendering them from code, or declaratively as in your nested templates above.

本文标签： javascriptJsRender How to pass variables into a nested templateStack Overflow