如何在小胡子模板中处理字符串或字符串数​​组

时间:2014-02-04 06:44:00

标签: mustache hogan.js

我有一个简单/初学者的问题,在我的应用程序中使用小胡子模板(或更准确地说是Hogan)。 我使用的API有时会返回一个String,有时会返回一个字符串数组。

我知道可以将String包装在单个元素数组中,但是还有一种方法可以从胡子模板处理这个选项吗?

使用正常的部分,如
{{#stringOrArray}} <li>{{.}}</li> {{/stringOrArray}} 如果它只是一个字符串,则不会打印该值。

2 个答案:

答案 0 :(得分:12)

我知道这有点晚了,但这是我用的:

{{#test.length}}
    {{#test}}<li>{{.}}</li>{{/test}}
{{/test.length}}

{{^test.length}}
    <li>{{test}}</li>
{{/test.length}}

就像功能检测一样。第一个代码块检查测试是否有一个长度,如果是,它是一个数组(是的,我知道字符串应该也有长度属性,但他们不会)。它将输出数组(如果它是一个数组),或者什么都不输出(如果它不是)。如果第二个块没有长度(即它是一个字符串或整数等),则打印出test的值。这意味着你可以在它上面使用它:

var data = {
    test: "test1"
}

OR

var data = {
    test: [ "test1", "test2", "test3" ]
}

无需设置是否为数组的标志。小胡子会为你解决。

答案 1 :(得分:1)

我不知道如何在没有任何辅助变量的情况下直接从您的对象执行此操作。在将数据传递给模板之前,您可以执行以下操作,以避免混淆生成原始JSON对象的代码。

让这成为你的JSON对象:

var data = {
    test: [ "test1", "test2", "test3" ]
}

让这成为你的小胡子模板:

{{#isArray}}
    {{#test}} <li>{{.}}</li>{{/test}}
{{/isArray}}

{{^isArray}}
    {{test}}
{{/isArray}}

让这个代码编译/调用你的胡子模板(我正在使用document.body.innerHTML,因为这就是我设置JSFIDDLE示例的方式):

var template = document.body.innerHTML;
document.body.innerHTML = Mustache.render(template, data);

以上设置将打印以下内容,因为isArray未定义,因此它将执行使用isArray符号否定^的块(例如,它会将数据视为一个字符串,即使它是一个数组):

test1,test2,test3

我建议如果你不想触摸生成JSON的代码,那么在调用Mustache.render之前注入一些javascript来设置isArray属性。以下是我如何测试pop方法是否存在,以便在将数据传递给模板之前正确设置isArray

if (data.test.pop) { data.isArray = 1; } else { data.isArray = 0; }
var template = document.body.innerHTML;
document.body.innerHTML = Mustache.render(template, data);

这将正确打印出所需的li元素:

test1
test2
test3

我在这里放了一个工作示例,它在数据元素中运行数组和字符串实例,以显示解决方案的工作原理:

http://jsfiddle.net/s7Wne/1/