我将一些动态数据加载到名为“ 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));
任何人都可以告诉代码有什么问题以及如何解决此问题吗?。
您正在传递要渲染的数组,因此将为每个项目(包括包装的<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>
as
<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/