拿Mustache模板,传递JSON并转换为HTML

时间:2013-03-21 09:15:02

标签: java html json mustache

我使用下面的代码将JSON数据合并到模板中,以获取HTML:

模板:

String schema = "<h1>{{header}}</h1>"
    + "{{#bug}}{{/bug}}"
    + "{{#items}}"
    + "{{#first}}"
    + "<li><strong>{{title}}</strong>
    + </li>"
    + "{{/first}}"
    + "{{#link}}"
    + "<li><a href=\"{{url}}\">{{name}}
    + </a></li>"
    + "{{/link}}"
    + "{{/items}}"
    + "{{#empty}}"
    + "<p>The list is empty.</p>"
    + "{{/empty}}";

JSON对象:

try {
    String template = "{\"header\": \"Colors\", "
        + "\"items\": [ "
        + "{\"name\": \"red\", \"first\": true, \"url\": \"#Red\"}, "
        + "{\"name\": \"green\", \"link\": true, \"url\": \"#Green\"}, "
        + "{\"name\": \"blue\", \"link\": true, \"url\": \"#Blue\"}"
        + " ], \"empty\": false }";

    JSONObject jsonWithArrayInIt = new JSONObject(template); 
    JSONArray items = jsonWithArrayInIt.getJSONArray("items"); 

    Map<String,String> ctx = new HashMap<String,String>();
    ctx.put("foo.bar", "baz");
    Mustache.compiler().standardsMode(true).compile("{{foo.bar}}").execute(ctx);

    System.out.println("itemised: " + items.toString());
} catch(JSONException je) {
    //Error while creating JSON.
}

我传递数据地图以使Mustache工作。该方法如下所示:

public static Map<String, Object> toMap(JSONObject object)
        throws JSONException {
    Map<String, Object> map = new HashMap();
    Iterator keys = object.keys();

    while (keys.hasNext()) {
        String key = (String) keys.next();
        map.put(key, fromJson(object.get(key)));
    }

    return map;
}

我正在关注Mustache Guide以获取Moustache自动格式化。但我不知道如何得到我期待的结果。输出应如下:

<h1>Colors</h1>
<li><strong></strong></li>
<li><a href="#Green">green</a></li>
<li><a href="#Blue">blue</a></li>

2 个答案:

答案 0 :(得分:1)

我认为您需要稍微重新考虑一下您的Mustache模板。 jMustache库(我假设您正在使用)似乎始终将{{#个实体视为列表并迭代它们的内容,无论传入的数据类型如何。

这样的事情应该有效:

<h1>{{header}}</h1>
{{#items}}
<li>
    {{#url}}<a href="{{.}}">{{/url}}
    {{^url}}<strong>{{/url}}
        {{caption}}
    {{#url}}</a>{{/url}}
    {{^url}}</strong>{{/url}}
</li>
{{/items}}
{{^items}}
    <p>The list is empty.</p>
{{/items}}

只有当一个&#34;链接&#34;提供了值,从而避免了条件问题时的jMustache。所以JSON模型看起来像这样:

{
"header": "Colors",
"items": [
        {"caption": "title"},
        {"caption": "red", "url": "#Red"},
        {"caption": "green", "url": "#Green"},
        {"caption": "blue", "url": "#Blue"}
    ]
}

最后,您需要将JSON转换为jMustache理解的内容。我从未见过或听说过&#34; HTTPFunctions&#34;在我使用过的任何图书馆中的课程,但我过去使用Gson做过类似的映射。请注意,这是一个非常简单的实现,您可能需要扩展它以满足您的需求:

private Map<String, Object> getModelFromJson(JSONObject json) throws JSONException {
    Map<String,Object> out = new HashMap<String,Object>();

    Iterator it = json.keys();
    while (it.hasNext()) {
        String key = (String)it.next();

        if (json.get(key) instanceof JSONArray) {

            // Copy an array
            JSONArray arrayIn = json.getJSONArray(key);
            List<Object> arrayOut = new ArrayList<Object>();
            for (int i = 0; i < arrayIn.length(); i++) {
                JSONObject item = (JSONObject)arrayIn.get(i);
                Map<String, Object> items = getModelFromJson(item);
                arrayOut.add(items);
            }
            out.put(key, arrayOut);
        }
        else {

            // Copy a primitive string
            out.put(key, json.getString(key));
        }
    }

    return out;
}

这个基本的JUnit测试演示了理论:http://www.pasteshare.co.uk/p/841/

答案 1 :(得分:0)

只需使用

Map<String, Object> s =  HTTPFunctions.toMap(new JSONObject(template));