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/

アップデート

あなたが何を求めているのかがわかったので、ソリューションを更新しました。配列内の3つ（または6つなど）の要素ごとに新しい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 に答える