用胶水连接/使用 Mustache JS 连接答案

【问题标题】：Concat with glue / join using Mustache JS用胶水连接/使用 Mustache JS 连接
【发布时间】：2012-10-11 10:26:49
【问题描述】：

我正在尝试使用 Mustache 显示一组项目，我想用逗号分隔符显示它们。

这是我的对象：

{"items": [
    {"display": "Item 1"},
    {"display": "Item 2"},
    {"display": "Item 3"},
    {"display": "Item 4"}
]}

这是我的 Mustache JS 模板：

{{#items}}{{display}}, {{/items}}

不幸的是，这将呈现为：

Item 1, Item 2, Item 3, Item 4,

我想删除最后一个“，”，因为它在视觉上看起来很奇怪。

我尝试了函数，但得到的是“{{items}}”文本，而不是数组items。

我该怎么做？

【问题讨论】：

我用我自己提出的答案发布了一个类似的问题。 See this posting for more

标签： javascript mustache

【解决方案1】：

您可以使用 Mustache 函数。它们像任何其他部分一样在您的模板中定义，然后在它们所包裹的内容上运行。对于您的情况，它看起来像这样：

{
  "items": [
    {"display": "Item 1"},
    {"display": "Item 2"},
    {"display": "Item 3"},
    {"display": "Item 4"}
  ],
  "trim": function () {
    return function (text, render) {
      return render(text).replace(/(,\s*$)/g, ''); // trim trailing comma and whitespace 
    }
  }
}

那么您的 Mustache 标记将如下所示：

{{#trim}}{{#items}}{{display}}, {{/items}}{{/trim}}

你的输出将是你所追求的：

Item 1, Item 2, Item 3, Item 4

查看jsfiddle。

【讨论】：

【解决方案2】：

我知道解决这个问题的两种方法，首先是编写自己的迭代器助手（这是最好的解决方案），其次是手动删除（使用 DOM 处理）尾随 coma。

只需使用您的 javascript ($("selector").html()) 找到文本，然后对其进行切片。

var html = jQuery("selector").html();
html = html.slice(0, html.length-1);

这样你就剪掉了最后一个字符。

【讨论】：