Jsrender如何在if语句中引用循环索引及排查首次循环问题

嘿，我来帮你搞定这两个JsRender的问题，刚好我之前也踩过类似的坑！

问题一：在if语句中引用循环索引 #

JsRender在{{for}}循环里提供了内置的{{:#index}}变量（从0开始计数），你可以直接在{{if}}语句里用它来判断索引条件。给你举个实际可用的例子：

<script id="itemTemplate" type="text/x-jsrender">
  {{for productList}}
    <div class="product-item">
      {{if #index === 0}}
        <strong>这是第一个商品：{{:productName}}</strong>
      {{else if #index === productList.length - 1}}
        <span>这是最后一个商品：{{:productName}}</span>
      {{else}}
        <p>普通商品：{{:productName}}</p>
      {{/if}}
    </div>
  {{/for}}
</script>

这里的#index直接绑定当前循环项的索引，在if条件里直接判断就行，不需要额外的复杂操作。

问题二：检查for循环的首次迭代 #

你提到用getIndex()和自定义变量无效，大概率是用法没踩对点子上。其实JsRender已经内置了{{:#first}}这个布尔值变量，专门用来判断当前是否是循环的首次迭代，用它比自己折腾变量方便太多：

<script id="listTemplate" type="text/x-jsrender">
  {{for userList}}
    {{if #first}}
      <div class="header">用户列表（第一个项）：{{:userName}}</div>
    {{else}}
      <div class="normal-item">用户：{{:userName}}</div>
    {{/if}}
  {{/for}}
</script>

如果之前你尝试用getIndex()，可能是没正确调用上下文方法——getIndex()需要在循环上下文里用~前缀访问，比如{{if ~getIndex() === 0}}，但显然用#first更简洁直观，还不容易出错。

至于自定义变量无效的问题，大概率是作用域没搞对：循环内的变量更新没法正确同步到判断逻辑里，而#first是JsRender内部维护的上下文变量，完全不用操心作用域的问题，直接用就稳了。

内容的提问来源于stack exchange，提问作者user3507848