在Mustache模板中是否有一种表达逗号分隔列表而没有尾随逗号的优雅方式？

Question

我正在使用Mustache模板库并尝试生成逗号分隔列表而不带尾随逗号,例如

红色,绿色,蓝色

在给定结构的情况下,使用尾随逗号创建列表很简单

{
  "items": [
    {"name": "red"},
    {"name": "green"},
    {"name": "blue"}
  ]
}

和模板

{{#items}}{{name}}, {{/items}}

这将解决

红色,绿色,蓝色,

但是,在没有尾随逗号的情况下,我无法看到表达案例的优雅方式.我总是可以在将代码传递到模板之前在代码中生成列表,但我想知道库是否提供了另一种方法,例如允许您检测它是否是模板中列表中的最后一项.

Answer 1

我认为更好的方法是动态更改模型.例如,如果您使用的是JavaScript:

model['items'][ model['items'].length - 1 ].last = true;

并在您的模板中,使用倒置部分:

{{#items}}
    {{name}}{{^last}}, {{/last}}
{{/items}}

渲染该逗号.

Answer 2

Hrm,令人怀疑,小胡子演示几乎向你展示first了你必须拥有JSON数据中的逻辑以确定何时放入逗号.

所以你的数据看起来像这样:

{
  "items": [
    {"name": "red", "comma": true},
    {"name": "green", "comma": true},
    {"name": "blue"}
  ]
}

和你的模板

{{#items}}
    {{name}}{{#comma}},{{/comma}}
{{/items}}

我知道它并不优雅,但正如其他人所提到的, Mustache非常轻巧,并没有提供这样的功能.

Answer 3

作弊并使用CSS.

如果您的模型是:

{
  "items": [
    {"name": "red"},
    {"name": "green"},
    {"name": "blue"}
  ]
}

然后制作你的模板

<div id="someContainer">
{{#items}}
    <span>{{name}}<span>
{{/items}}
</div>

并添加一点CSS

#someContainer span:not(:last-of-type)::after {
  content: ", "    
}

我猜有人会说这是一个将标记放在演示文稿中的坏例子,但我认为不是.逗号分隔值是一种表达决策,可以更轻松地解释基础数据.它类似于在条目上交替字体颜色.

Answer 4

如果您碰巧使用jmustache,则可以使用特殊-first或-last变量:

{{#items}}{{name}}{{^-last}}, {{/-last}}{{/items}}

Answer 5

虽然有点晚了，但也许对现在正在寻找的人有帮助：5.1.1 可以这样做：

{{#allVars}}{{name}}{{^-last}}, {{/-last}}{{/allVars}}

输出：

变量1、变量2、变量3

Answer 6

我想不出很多情况,你想在一个<ul>或多个项目之外列出未知数量的项目<ol>,但这就是你如何做到的:

<p>
    Comma separated list, in sentence form;
    {{#each test}}{{#if @index}}, {{/if}}{{.}}{{/each}};
    sentence continued.
</p>

......会产生:

Command separated list, in sentence form; asdf1, asdf2, asdf3; sentence continued.

这是Handlebars,请注意.@index如果test是一个数组将工作.

Answer 7

Mustache是​​否提供了一种优雅的方法来解决这个问题,但我想到最优雅的方法可能是使用CSS而不是改变模型.

模板:

<ul class="csl">{{#items}}<li>{{name}}</li>{{/items}}</ul>

CSS:

.csl li
{
    display: inline;
}
.csl li:before
{
    content: ", "
}
.csl li:first-child:before
{
    content: ""
}

这适用于IE8 +和其他现代浏览器.

Answer 8

在Mustache中没有内置的方法可以做到这一点.您必须更改模型才能支持它.

在模板中实现此功能的一种方法是使用倒置选择帽{{^last}} {{/last}}标签.它只会省略列表中最后一项的文本.

{{#items}}
    {{name}}{{^last}}, {{/last}}
{{/items}}

或者您可以为", "对象添加分隔符字符串,或者如果您使用具有继承的语言,则理想情况下是基类,然后将"delimiter"设置" "为最后一个元素的空字符串,如下所示:

{{#items}}
    {{name}}{{delimiter}}
{{/items}}