使用Tempo转换树结构

时间:2012-01-23 15:55:39

标签: javascript html json recursion tempo

我已经开始在一个小的Web项目中使用JSON数据结构而不是XML。我需要对数据进行一些转换,就像你通常使用XML上的XSLT一样,然后我对酷库http://tempojs.com进行了简化。

但是当我意识到我的数据是树结构时,真正的问题就出现了,我想在转换中需要一些递归。

以下是数据结构的示例:

[
        {
            "text" : "The sun is shining",
            "children" : []
        },
        {
            "text" : "it's cloudy.",
            "children" :  
            [
                {   
                    "text" : "It's raining.",
                    "children" : []
                },
                {
                    "text" : "The sun was shining.",
                    "children" : []
                },
                {
                    "text" : "A rainbow appeared.",
                    "children" : 
                    [
                        {   
                            "text" : "A pot of gold was found at the end of the rainbow.",
                            "children" : []
                        },
                        {
                            "text" : "The gold returned more than a million dollars, when sold.",
                            "children" : []
                        }
                    ]
                }
            ]
        }
    ]

我想转换成这样的嵌套HTML列表:

<ul>
    <li>The sun is shining</li>
    <li>it's cloudy.
        <ul>
            <li>It's raining.</li>
            <li>The sun was shining.</li>
            <li>A rainbow appeared.
                <ul>
                    <li>A pot of gold was found at the end of the rainbow.</li>
                    <li>The gold returned more than a million dollars, when sold.</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

任何想法如何使用Tempo来完成这项工作?

2 个答案:

答案 0 :(得分:0)

Tempo 1.x无法处理多级嵌套模板。但是,2.0-dev分支支持这一点,在我看来正确地呈现您的数据:http://jsfiddle.net/mr_olafsson/wLEQs/

请注意,该示例确实意味着固定(且相等)数量的级别/嵌套模板。让我知道你是怎么办的!对不起,迟到的回复。

答案 1 :(得分:-1)

我不知道节奏,我使用underscore.js代替。

它将是这样的:

var mytemplate = "
<%= text %>
<ul>
    <% _.each(children, function(child){ %>
    <li><%= child.text %></li>
    <li><%= _.template(mytemplate, child.children) %>
    </li>
</ul>
";

var htmlResult = _.template(mytemplate, myJSON);