代码之家 › 专栏 › 技术社区 › trzczy

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

jquery-templates templates javascript

trzczy · 技术社区 · 8 年前

问题是关于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名称属性。但下一个列出的文件会重复相同的ceckbox组,因此名称会重复。所以我必须为每个列出的文件添加一个数字。

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

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

<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视图中的外观:

1 回复 | 直到 8 年前

zfrisch 8 年前

我不确定你在使用什么样的模板,但在JS方面,大多数模板基本上是相同的。我对WDStack的微模板进行了剖析,这可能会在未来对您有所帮助: Understanding JavaScript Micro-Templating

你的格式似乎是 {% %} 用于JavaScript代码和 {%= %} 用于从对象中检索JavaScript值。

我认为你的问题是,为了让一个值能够被检索,它必须是你的数据对象的一部分,然后必须有一种方法来添加 i 添加到数据对象,以便稍后在代码中检索它。

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

模板化经常被迷惑,但下面是一个使用稍微不同的语法(使用插入符号而不是大括号)的演示,这是我从上面的文章中得到的。它只使用很少几行JavaScript,但同样有效。它还将在每个列表项的id后面附加 我 :

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>