mustache.js中的条件循环

问题描述：

如何在每次迭代后输出<hr>，除了最后一次使用mustache.js。我试过JavaScript的循环，但我无法摆脱最后<hr>。（有人建议使用handlebars.js但我想留小胡子。）mustache.js中的条件循环

这里是我的JSON（名单很为得到补充更多的员工更大）

{ 
     employees: [ 
     {firstName: "John", lastName: "Smith"}, 
     {firstName: "John", lastName: "Doe"}, 
     {firstName: "Jane", lastName: "Doe"}  
     ] 
    }

我想这个HTML输出：

John Smith 
<hr> 
John Doe 
<hr> 
Jane Doe

答

看着Mustache Manual，你会想要使用被称为“倒置段”的东西。从手册开始：

倒置部分以插入符号（帽子）开始，以斜线结尾。即{{^ person}}开始一个“人物”倒立部分，而 {{/ person}}结束它。

虽然各部分可用于根据一次或多次呈现文本，但键的值，反转部分可能会根据键的相反值呈现一次文本。也就是说，如果键不存在，为假或为空列表，它们将被呈现。

要利用此功能，您可以向最后一名员工添加一个额外的属性以区分它。

JSON：

{ 
    "employees": [ 
    {"firstName": "John", "lastName": "Smith"}, 
    {"firstName": "John", "lastName": "Doe"}, 
    {"firstName": "Jane", "lastName": "Doe", "last": true}  
    ] 
}

髭模板：

{{#employees}} 
    {{firstName}} {{lastName}} 
    {{^last}} 
    <hr /> 
    {{/last}} 
{{/employees}}

这是非常相似于什么Mustache Demo陈列柜，使用的颜色阵列中的第一对象上的 “第一” 属性。

答

如果<hr/>的目的纯粹是为了风格，为什么不使用像:not(:last-child)这样的CSS选择器？

的JavaScript：

var tpl = "<ul>{{#employees}}<li>{{firstName}} {{lastName}}</li>{{/employees}}</ul>", 
     data = { 
    "employees": [ 
    {"firstName": "John", "lastName": "Smith"}, 
    {"firstName": "John", "lastName": "Doe"}, 
    {"firstName": "Jane", "lastName": "Doe", "last": true}  
    ] 
}, 
    html = Mustache.to_html(tpl, data); 

document.write(html);

CSS：

li:not(:last-child) { 
    border-bottom: 1px solid blue; 
}

Here's a working jsFiddle to see it in action

mustache.js中的条件循环

相关推荐