2

我如何计算每个 jquery 模板中的项目并将 if 应用于该变量

就像是

<script id="inventorySummaryTmpl" type="text/x-jquery-tmpl"> 
<tr>
{{each response}}
    {{if response.length === 2 }}
        </tr><tr>
    {{/if}}
        <td><img src='${icon}'> ${title} </td>
{{/each}}

</tr>

这是加载 JSON 并与 jquery.TMPL 交互的 javascript

 var ip = window.location.hash;


    var request = $.ajax({
        type: 'GET',
        url: 'ajax/dashboard/widgets/inventorySummary.xsp?ip='+ip.substring(1),
        dataType: 'json'
    });

    request.done(function(data){
        $("#inventorySummaryTmpl").tmpl(data).appendTo("#inventorySummaryContent");
    });

    request.fail(function(jqXHR, textStatus, errorThrown) {
        console.log(errorThrown);
        console.log(textStatus)
    });

和 JSON

{

"response": [
    {
        "icon": "workstation",
        "nbItems": "38",
        "title": "Workstations"
    },
    {
        "icon": "server",
        "nbItems": "2",
        "title": "Servers"
    }
]

}

如果有人有任何想法。

4

1 回答 1

2

你非常接近。语句中的变量each需要是您正在循环的完整集合。您还可以为集合中每个项目的索引和值传递自定义变量名称。根据您的代码，以下内容应该有效，但如果您发布了收藏的结构，我们将能够确保它确实有效

<script id="inventorySummaryTmpl" type="text/x-jquery-tmpl"> 
<tr>
    {{each(index,resp) responses}}
        {{if resp.length === 2 }}
            </tr><tr>
        {{/if}}
        <td><img src='${resp.icon}'> ${resp.title} </td>
    {{/each}}
</tr>

jQuery 文档：http ://api.jquery.com/template-tag-each/

更新

现在我已经更新了我的解决方案，因为我看到了你所追求的。如果您想在数组中的每三个（或六个，或其他）元素之后开始一个新的ul（或） ，请检查当前元素的索引，而不是完整响应数组的长度。trresponse

<script id="inventorySummaryTmpl" type="text/x-jquery-tmpl"> 
  <ul>
    {{each(i,el) response}}
      {{if (i > 0 && i % 3 === 0) }}
        </ul><ul>
      {{/if}}
      <li class="inventoryWrap">
        <img src='blueprint/images/wrap/icons/${icon}.png' class="inventoryPic"> 
        <span class="inventoryCount">${el.nbItems}</span> 
        <span class="inventoryText">${el.title}</span>
      </li>
    {{/each}}
  </ul>
</script>

演示： http: //jsfiddle.net/jackwanders/ZzddF/​​1 /

于 2012-06-27T12:46:00.427 回答