CODEWITHSUNDEEP
javascriptjquery-templates
pigfox
pigfox

Reputation: 1401

jQuery Template loop counter

I have the following jQuery template and I need to keep track of the number of iteration for applying certain classes. I have tried all standard javascript variations I can think of.

How do I iterate over $i and then reference $i in the template?

<script type="text/html"id="sectionTemplate">                           <span data-bind="css: { selected: $data == viewModel.selectedSection() }, click: function(i) { viewModel.selectSection($data) }">
${i++}
<input id="radio" class="ui-helper-hidden-accessible" type="radio" name="radio">
<label class="class${i}" for="radio${i}" aria-pressed="false" role="button" aria-disabled="false">
<span class="ui-button-text">${$data}</span></label>                                     
</span>

Upvotes: 0

Views: 3154

Answers (1)

Mihnea
Mihnea

Reputation: 90

Calling an external function within the template can accomplish what you need. 

<script type="text/javascript">
    var i = 0;
    function count()
    {
        return i++;
    }
</script>

And then you call it like this in your template:

<script id="sectionTemplate" type="text/x-jQuery-tmpl">
    ${count()}
</script>

Upvotes: 2

Related Questions