使用 Tempo 转换树结构

发布于 2024-12-28 15:24:07 字数 1922 浏览 2 评论 0原文

我已经开始在一个小型 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 来完成此操作吗？

原文

I have started on using JSON data structures instead of XML in a little Web project. I need to do some transformation of the data, like you normally do with XSLT on XML, and then I stumpled upon the cool library http://tempojs.com.

But the real problem appeared when I realized, that my data is a tree structure and I guess some recursion in the transformation is needed.

Here's a sample of the data structure:

[
        {
            "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" : []
                        }
                    ]
                }
            ]
        }
    ]

And that I would like to transform into a nested HTML list like this:

<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>

Any Ideas how this could be done using Tempo?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

っ〆星空下的拥抱 2025-01-04 15:24:07

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

请注意，该示例确实暗示了固定（且相等）数量的级别/嵌套模板。让我知道你过得怎么样！抱歉回复晚了。

回复收藏 0 原文

楠木可依 2025-01-04 15:24:07

我不知道节奏，我用 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);

I dont know tempo, I use underscore.js instead.

it will be something like this:

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

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

回复收藏 0 原文

~没有更多了~