如何在不迭代的情况下在 JsRender 中渲染数组？答案

【问题标题】：How to render an array in JsRender without iteration?如何在不迭代的情况下在 JsRender 中渲染数组？
【发布时间】：2015-04-19 11:44:03
【问题描述】：

我将一些动态数据加载到名为“tabNames”的数组中，如下所示：

    tabNames.push({name: hit.category});

然后我需要在下面的 html 中列出“名称”字段。我想水平列出数组“tabNames”中的前 7 个“名称”值，然后将其他值列在下拉列表中。

这是我的html

        <div id="categories" class="food-category-tab">
            <script id="categoriesList" type="text/x-jsrender">
                 <ul id="myTab" class="nav nav-tabs">
                 {{if #index <=6}}
                <li class="active"><a href="#home" data-toggle="tab">{{>name}}  </a></li>
                {{/if}}
                {{if #index >6}}
                 <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">More <b class="caret"></b></a>
                  <ul class="dropdown-menu">
                    <li><a href="#dropdown1" data-toggle="tab">{{>name}}</a></li>
                  </ul>
                </li>
                {{/if}}
              </ul>
                </script>
         </div>

我从 js 文件中调用 jsrender，该函数用于将内容加载到“tabNames”数组中，如下所示：

    $("#categories").html($("#categoriesList").render(tabNames));

谁能告诉我代码有什么问题以及如何解决这个问题？

【问题讨论】：

我更改了标题以更好地反映问题。我还在下面的回复中添加了更多内容，涉及#data
没有问题。这似乎是恰当的标题。此外，您的新内容对我的代码也很有帮助。

标签： jquery jquery-plugins jquery-templates jsrender

【解决方案1】：

您正在传递一个要渲染的数组，因此正在为每个项目渲染整个模板，包括包装<ul>。

两种处理方式：

1：使用布尔标志调用渲染：noIteration:

$("#categoriesList").render(tabNames, true);

然后使用遍历#data 的模板，例如：

<ul id="myTab" class="nav nav-tabs">
    {{for #data}}
        ...
    {{/for}}
    {{if #data.length>6}}
        ...
    {{/if}}
</ul>

否则，2：将数组作为属性传递：

var data = {names: tabNames};
$("#categoriesList").render(data);

并使用类似的模板，但迭代names，而不是#data：

<ul id="myTab" class="nav nav-tabs">
    {{for names}}
        ...
    {{/for}}
    {{if names.length>6}}
        ...
    {{/if}}
</ul>

无论哪种方式，显示两级列表的模板都可以这样构造：

<ul id="myTab" class="nav nav-tabs">
    {{for names.slice(0, 7)}}
        <li class="active"><a href="#home" data-toggle="tab">{{>name}}  </a></li>
    {{/for}}
    {{if names.length>6}}
        <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">More <b class="caret"></b></a>
            <ul class="dropdown-menu">
                {{for names.slice(7)}}
                    <li><a href="#dropdown1" data-toggle="tab">{{>name}}</a></li>
                {{/for}}
            </ul>
        </li>
    {{/if}}
</ul>

也可以使用{{if}}...{{else}} 等，但它破坏了 HTML 和 JsRender 标记的自然组合层次结构，因此不太优雅且不易维护 - 像这样：

<ul id="myTab" class="nav nav-tabs">
    {{for names}}
        {{if #index<=6}}
            <li class="active"><a href="#home" data-toggle="tab">{{>name}}  </a></li>
        {{else #index===7}}
            <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">More <b class="caret"></b></a>
            <ul class="dropdown-menu">
            <li><a href="#dropdown1" data-toggle="tab">{{>name}}</a></li>
        {{else}}
            <li><a href="#dropdown1" data-toggle="tab">{{>name}}</a></li>
        {{/if}}
    {{/for}}
    {{if names.length>6}}
        </ul>
        </li>
    {{/if}}
</ul>

关于#data的注意事项：

任何带有#data 的表达式都可以简化，因为#data 是默认的当前数据上下文。你可以写

<ul>
    {{for #data}}
        ...
    {{/for}}
    {{if #data.length>6}}
        ...
    {{/if}}
</ul>

作为

<ul>
    {{for}} {{!-- in this case #data is an array so this iterates over the array--}}
        ...
    {{/for}}
    {{if length>6}}
        ...
    {{/if}}
</ul>

整个模板可以这样写：

<ul>
  {{for slice(0, 7)}}
    <li>{{>name}}</li>
  {{/for}}
  {{if length>6}}
    <li><b>More:</b>
      <ul>
        {{for slice(7)}}
          <li>{{>name}}</li>
        {{/for}}
      </ul>
    </li>
  {{/if}}
</ul>

这里有一个运行示例http://jsfiddle.net/BorisMoore/x0h9drr0/

【讨论】：