Extract i variable in for function in JavaScript Templates

Question

The question is about JS template engine: JavaScript Templates https://github.com/blueimp/JavaScript-Templates

How create an unique id for each generated html elements using the for loop variable?

In the following my code:

<script src="js/tmpl.min.js"></script>
<script type="text/x-tmpl" id="tmpl-demo">
   <h3>{%=o.title%}</h3>
   <p>Released under the
    <a href="{%=o.license.url%}">{%=o.license.name%}</a>.</p>
   <h4>Features</h4>
   <ul>
      {% for (var i=0; i<o.features.length; i++) { %}
       <li id="element{%=o.i%}">{%=o.features[i]%}</li>
      {% } %}
   </ul>
</script>

Application code:

var data = {
    "title": "JavaScript Templates",
    "license": {
        "name": "MIT license",
        "url": "https://opensource.org/licenses/MIT"
    },
    "features": [
        "lightweight & fast",
        "powerful",
        "zero dependencies"
    ]
};

{%=o.i%} code doesn't work in the code above neither {%=i%}

How can I use the i variable in for function?

Update

Accordingly to @zfrisch 's question. Why do I need it. I add a feature to the js modal that lists files that an user is uploading. The feature is that he can add some attributes by clicking several checkboxes. And I am just addin te checkboxes group for each listed file.

The checkboxes are created in php and each of them has an unique html name attribute in in the group. But the identical group of ceckboxes is repeated for the next listed file so the names are repeated. So I have to add a number that is dedicated to each listed file.

Php creates the JavaScript Templates template that is used by js or jquery.

The template in the source page view is like this:

<script id="template-upload" type="text/x-tmpl">
    <![CDATA[
    {% for (var i=0, file; file=o.files[i]; i++) { %}
        <tr  id="element{%=i%}" class="template-upload fade" style="border-bottom: none;">
            <td class="preview" style="border-bottom: none;"><span class="fade"></span></td>
            <td class="name">{%=file.name%}</td>
            <td class="size">{%=o.formatFileSize(file.size)%}</td>
            <td style="width:200px">
                <div class="ui-progressbar ui-widget ui-widget-content ui-corner-all" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
                    <div class="ui-progressbar-value ui-widget-header ui-corner-left" style="width:0%;">
                    </div>
                </div>
            </td>
            <td class="start">
                {% if (file.error) { %}
                    <button>Retry</button>
                    <span class="error">{%=file.error%}<span>
                {% } else { %}
                    <button style="display:none">Save files</button>
                {% } %}
            </td>
            <td class="cancel">
                <button class="btn btn-warning">Usuń</button>
            </td>
        </tr>
        <tr style="display: none; border-bottom: none;">
        </tr>
        <tr>
            <td colspan = "20"  style="border-top: none;">
            <h4 style="font-size:16px;">Check clubs::</h4>
    ]]>
                                                    <span style="margin-right:20px;">
                    <label><input type="checkbox" style="margin-right:3px;" name="club6row{%=i%}" />Lorem ipsum dolor</label>
                </span>
                                    <span style="margin-right:20px;">
                    <label><input type="checkbox" style="margin-right:3px;" name="club7row{%=i%}" />Lorem ipsum dolor</label>
                </span>
                                    <span style="margin-right:20px;">
                    <label><input type="checkbox" style="margin-right:3px;" name="club8row{%=i%}" />Lorem ipsum dolor</label>
                </span>
                                    <span style="margin-right:20px;">
                    <label><input type="checkbox" style="margin-right:3px;" name="club9row{%=i%}" />Lorem ipsum dolor</label>
                </span>
                                    <span style="margin-right:20px;">
                    <label><input type="checkbox" style="margin-right:3px;" name="club10row{%=i%}" />Lorem ipsum dolor</label>
                </span>
                                    <span style="margin-right:20px;">
                    <label><input type="checkbox" style="margin-right:3px;" name="club11row{%=i%}" />Lorem ipsum dolor</label>
                </span>
                                    <span style="margin-right:20px;">
                    <label><input type="checkbox" style="margin-right:3px;" name="club18row{%=i%}" />Lorem ipsum dolor</label>
                </span>
                                        <![CDATA[
            </td>
        </tr>
    {% } %}

    ]]>

The {%=i%} code is used twice and it is evaluated to nothing but should be to a number. See how it looks like in chrome element inspect view:

Answer 1

I'm not sure what templating you're using but most of them are basically the same when it comes to JS. I did a dissection of Micro-Templating for WDStack that may help you in the future: Understanding JavaScript Micro-Templating

Your format seems to be to use {% %} for JavaScript code and {%= %} for JavaScript value retrieval from your object.

I think your issue is thinking that, in order for a value to be retrievable it has to be part of your data object - and subsequently that there has to be a way to add i to the data object so you can retrieve it later in your code.

This is understandable, but flawed logic. The JavaScript code that you run, and the variables therein, can be retrieved just as easily as those found within your data object. Furthermore they are replaced before the code is run. This means that you can simply use these variables as if they are available along side your data object. In your case {%= i %} should pull the data you want effectively.

Templating is mystified far too often, but below is a demonstration with a slightly different syntax (using carets instead of braces) that I have off-hand from the article above. It uses very few lines of JavaScript but is just as effective. It will also append the id of each list item with the value from i:

var template = document.getElementById('ourTemplate');
var templateText = template.textContent;
var render = Templater(templateText);
function Templater(templateText) {
  return new Function(
    "page",
    "var output=" +
    JSON.stringify(templateText)
    .replace(/<%=(.+?)%>/g, '"+($1)+"')
    .replace(/<%(.+?)%>/g, '";$1\noutput+="') +
    ";return output;"
  );
}
var Page = {
title: "Home",
links: ['Google','CSS-Tricks','Codrops']
}
document.body.innerHTML = render(Page);

<script type="text/template" id="ourTemplate">
<h1> Welcome to the <%= page.title %> Page</h1>
<h3> Please Visit our Friends: </h3><br>
<ul>  
<% for (var i=0; i < page.links.length; i++) { %>    
<li id="listItem<%= i %>"> <%= page.links[i] %>, my id is listItem<%= i %></li>  
<% } %>  
</ul>
</script>