JsRender: How to pass variables into a nested template

Question

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!

Allineallis

For second question, {{for myData tmpl="#myBtnTmpl"/}} But totally don't understand your original question.. – Nashua

Anyway, according to the title, I think you can have a reference at github.com/BorisMoore/jsrender/blob/master/demos/step-by-step/… – Nashua

Answer 1

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.

Gondar

Hi Boris and thanks for your quick reply. I followed your example and I put ~arrIndex=0 on the tag. However the template does not seem to find the variable when I try to access it within the template. I am using the latest commit count 19. Did it work for you? – Allineallis

Thanks for still supporting jsRender, u should put a showCase on the official page – Browse

@boban984: You mean showing links to sites using JsRender or JsViews? – Gondar

@Gondar Yes, i feel like jsRender is underappreciated.I've been using it since it was in alpha stage, before there was jsViews :) At the time there was no Angular or Ember, Backbone and Knockout were just getting popular, but jsRender was way more perfomant for our needs so that's why we picked it. I am still using it ... check Solaborate – Browse

@BobanStojanovski: Thanks - good to hear. Of course I know there are many folks out there doing very cool things and making cool sites with JsRender or JsViews - but it is difficult to find out who they are, or establish a list of such sites. Also many of them are powerful internal sites - not public facing ones. That's why so far I haven't yet tried to establish a 'gallery'... (If you have further thoughts about that, I'd be happy to exchange via email - [email protected]) – Gondar

You are right, only thing i can think of is to put some form or whatever on the site where people can send you the urls of their apps. – Browse