Can jquery template have a for loop

I need to create a jQuery template with a monthly dropdown and a schedule day dropdown in it. It seems like overkill I have to include a list of months and a daily list in each of my JSON model elements, which have values ​​from 1 to 31 so that I can create variations with the {{each}} syntax.

I saw how you can add a dynamic array inside {{each}} in another answer: Can I declare local / temporary variables in a jQuery template?

I can probably just define an array inside it with values ​​from 1 to 31. But even that's a little verbose. Is there a better way to do a for loop in jquery templates?

Perhaps I can find some date object to iterate over for a specific case, but what about a date not related to using a loop?

I want the loop to be fully defined in the template without using an external global variable. With a global variable, I could easily use {{each}}.


source to share

1 answer

I found how to add another tag to jquery templates. Here is the definition for the tag. Add this after your script links to jquery and jquery.tmpl.js:

(function ($) {
$.extend(jQuery.tmpl.tag, {
    "for": {
        _default: {$2: "var i=1;i<=1;i++"},
        open: 'for ($2){',
        close: '};'


Thanks for the sample for the textarea tag from Roel Kramers:

Also looking at the jquery.tmpl source to define each tag helped a lot.

The default is a for loop with 1 iteration. This is how you define the body of the template to use it:

<script id="TestTemplate" type="text/x-jQuery-tmpl">
    <select name="DayOfMonth">
        <option value="${i}">${i}</option>
        {{/for }}


Here's a jsFiddle page to see it in action:



All Articles