mustache.js中的条件循环

Question

<hr>除了最后一次使用mustache.js之外,我怎么能在每次迭代后输出.我尝试了javascript for循环,但我无法摆脱最后<hr>.(有些人建议使用handlebars.js,但我想留胡子.)

这是我的json(随着更多员工的加入,名单越来越大)

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

我想要这个html输出:

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

Answer 1

查看胡子手册,您将需要使用所谓的"倒置部分".从手册:

倒置部分以插入符号(帽子)开头,以斜线结尾.那就是{{^ 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展示的内容非常相似,使用颜色数组中第一个对象的"first"属性.

Answer 2

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

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;
}

这是一个有效的jsFiddle,可以看到它的实际效果