Question

问题是关于JS模板引擎： JavaScript模板 https://github.com/blueimp/JavaScript-Templates

如何使用for循环变量为每个生成的html元素创建唯一ID？

以下我的代码：

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

申请代码：

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

{%=o.i%}代码在上面的代码中都不起作用{%=i%}

如何在i函数中使用for变量？

更新

相应@zfrisch的问题。我为什么需要它。我在js模式中添加了一个功能，列出了用户正在上传的文件。该功能是他可以通过单击几个复选框添加一些属性。我只是为每个列出的文件添加了复选框组。

复选框是在php中创建的，每个复选框都在组中有一个唯一的html name属性。但是对于下一个列出的文件重复使用相同组的ceckbox，因此重复名称。所以我必须添加一个专用于每个列出文件的数字。

Php创建js或jquery使用的JavaScript Templates模板。

源页面视图中的模板如下所示：

<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>
    {% } %}

    ]]>

{%=i%}代码被使用了两次，它被评估为什么，但应该是一个数字。在chrome element inspect视图中查看它的样子：

Answer 1

我不确定你正在使用什么模板但是大多数模板在JS方面基本相同。我对WDStack的Micro-Templating进行了剖析，可以在将来为您提供帮助：Understanding JavaScript Micro-Templating

您的格式似乎是使用{% %}表示JavaScript代码，{%= %}表示从您的对象中检索JavaScript值。

我认为您的问题在于，为了使值可以检索，它必须是您的数据对象的一部分 - 并且随后必须有一种方法将i添加到数据对象中，以便您可以稍后在代码中检索它。

这是可以理解的，但有缺陷的逻辑。您运行的JavaScript代码及其中的变量可以像在数据对象中找到的那样轻松地检索。此外，它们在代码运行之前被替换。这意味着您可以简单地使用这些变量，就像它们在数据对象旁边一样。在您的情况下，{%= i %}应该有效地提取您想要的数据。

模板经常被迷惑，但下面是一个演示，其语法稍有不同（使用插入符号而不是大括号），我从上面的文章中得到了解释。它只使用很少的JavaScript行，但同样有效。它还会使用i：

中的值附加每个列表项的ID

＆＃13;

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

＆＃13;

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

＆＃13;

在JavaScript模板中为函数提取i变量

更新

1 个答案: