使用Mustache JS进行胶水/连接的Concat

时间:2012-10-11 10:26:49

标签: javascript mustache

我正在尝试使用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

我该怎么办?

感谢您的帮助!

2 个答案:

答案 0 :(得分:5)

您可以使用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上查看。

答案 1 :(得分:1)

我知道解决这个问题的两种方法,首先是编写自己的迭代器助手(这是最好的解决方案),而sencond是手动删除(使用DOM处理)尾随昏迷。

只需使用您的javascript($("selector").html())找到该文本,然后将其剪切。

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

你那样削减了最后一个角色。