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

查看Mustache Manual，您会想要使用所谓的“倒置部分”。从手册：

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

虽然可以使用部分基于的一次或多次渲染文本   键的值，倒置部分可以基于文本呈现一次   键的反转值。也就是说，如果是，它们将被渲染   key不存在，为false，或者是空列表。

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

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/>的目的纯粹是为了样式，为什么不使用像: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中的条件循环

2 个答案: