如何在JsRender中呈现数组而不进行迭代? [英] How to render an array in JsRender without iteration?

问题描述

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

I have an some dynamic data loaded in to an array named "tabNames" like this:

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

然后，我需要在以下html中列出名称"字段.我想水平列出数组"tabNames"中的前7个名称"值，然后将其他值放入一个下拉列表中.

Then I need to list the "name" fields in the following html. I want to list first 7 "name" values in the array "tabNames" horizontally and then the others in to a drop down.

这是我的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"数组中的函数，如下所示:

And I call jsrender from the js file,where the function is written for loading the content into "tabNames" array, like below:

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

任何人都可以说出代码有什么问题以及如何解决吗?.

Can anybody tell what is wrong with the code and how to fix this?.

推荐答案

您正在传递要渲染的数组，因此将为每个项目(包括包装的<ul)渲染整个模板.

You are passing an array to render, so the whole template is being rendered for each item, including the wrapping <ul.

两种处理方法:

1:调用带有布尔标志的渲染器:noIteration:

1: Call render with a boolean flag: noIteration:

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

然后使用在#data上迭代的模板，例如:

then use a template that iterates over #data such as:

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

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

Or else, 2: Pass in your array as a property:

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

并使用类似的模板，但是遍历names，而不是#data:

And use a similar template, but iterating over names, not #data:

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

无论哪种方式，用于显示列表的两个级别的模板都可以这样构造:

Either way, the template to show the two levels of list can be structured like this:

<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标记的自然组合层次结构，因此不太美观，也不太易于维护-像这样:

It is also possible to use {{if}}...{{else}} etc. but it breaks the natural combined hierarchy of HTML and JsRender markup, and so is less elegant and less maintainable - like this:

<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是默认的当前数据上下文.你可以写

Any expression with #data can be simplified, since #data is the default current data context. You can write

<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/

这篇关于如何在JsRender中呈现数组而不进行迭代?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！