Question

初学者在这里试图找出构造一些JSON的最佳方法并输出以下嵌套的＆lt; ul＆gt;

以下每个加粗项都是JSON中的值。我如何构建JSON，然后如何使用jQuery构建DOM结构？非常感谢任何帮助。

<ul>
    <li>Topic 1
        <ul>
            <li id="foo_item1a">
                <a href="destination_Item1a">
                    <strong>Lorem</strong>
                    <span>Item 1a</span>
                    <em>Ipsum</em>
                </a>
            </li>
            <li id="foo_item1b">
                <a href="destination_Item1b">
                    <strong>Dolor</strong>
                    <span>Item 1b</span>
                    <em>Sit</em>
                </a>
            </li>
        </ul>
    </li>
    <li>Topic 2
        <ul>
            <li id="foo_item2a">
                <a href="destination_Item2a">
                    <strong>Lorem</strong>
                    <span>Item 2a</span>
                    <em>Ipsum</em>
                </a>
            </li>
            <li id="foo_item2b">
                <a href="destination_Item2b">
                    <strong>Dolor</strong>
                    <span>Item 2b</span>
                    <em>Sit</em>
                </a>
            </li>
        </ul>
    </li>
</ul>

Answer 1

我最近成为了 mustache.js 的忠实粉丝。

http://github.com/janl/mustache.js/

修改

如果我稍微调整一下calvinf的JSON格式，那么这是一个使用mustache.js的例子：

<html> <head> <script type="text/javascript" src=" http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="http://github.com/janl/mustache.js/raw/master/mustache.js"></script> <script type="text/javascript"> var topics = { topics: [ { title : "Topic 1", items : [ {title: "1a", link: "http://www.example.com/", text: "Link Text or HTML"}, {title: "1b", link: "http://www.example.com/", text: "Link Text or HTML"} ] }, { title : "Topic 2", items : [ {title: "2a", link: "http://www.example.com/", text: "Link Text or HTML"}, {title: "2b", link: "http://www.example.com/", text: "Link Text or HTML"} ] } ]}; var template = "<ul>{{#topics}}<li>{{title}}<ul>{{#items}}<li id=\"foo_item{{title}}\"><a href=\"{{link}}\">{{text}}</a></li>{{/items}}</ul>{{/topics}}</ul>"; $(document).ready(function() { $("#topics").html(Mustache.to_html(template, topics)); }); </script> <title></title> </head> <body> <div id="topics"></div> </body> </html>

如果你想要一个JavaScript模板库的速度基准测试，我发现这个链接很有用：

http://www.viget.com/extend/benchmarking-javascript-templating-libraries/

Answer 2

您可以使用类似DOM的方法来设置属性和文本内容，以避免使用简单html()设置的HTML转义问题以及模仿系统中更天真的问题。例如，使用jQuery 1.4和jSON输入沿着calvinf的例子：

var ul0= $('<ul>');
$.each(topics, function() {
    var li0= $('<li>', {text: this.title});
    var ul1= $('<ul>');
    $.each(this.items, function() {
        ul1.append($('<li>', {id: 'foo_'+this.title})
            .append($('<a>', {href: this.link, text: this.text})
                .append($('<strong>', {text: this.data0}))
                .append($('<span>', {text: this.data1}))
                .append($('<em>', {text: this.data2}))
            )
        );
    });
    li0.append(ul1);
    ul0.append(li0);
});

Answer 3

首先建议看一下JSON site。它有一些JavaScript中的JSON代码示例。

如果你用JSON构建整个东西，我会这样做。

var topics = {
  topic1: {
    title : "Topic 1",
    items : [
      {title: "1a", link: "http://www.example.com/", text: "Link Text or HTML"},
      {title: "1b", link: "http://www.example.com/", text: "Link Text or HTML"}
    ]
  },
  topic2: {
    title : "Topic 2",
    items : [
      {title: "2a", link: "http://www.example.com/", text: "Link Text or HTML"},
      {title: "2b", link: "http://www.example.com/", text: "Link Text or HTML"}
    ]
  }
};

如果您只需要一部分信息，那么您可以采用不同的方式，但这应该可以为您提供一些东西。

要使用这些值更新DOM，可以从JSON对象循环遍历相应的数组，然后填充值。使用jQuery .html( htmlString ) function。

我希望这可以帮助你开始。

Answer 4

我会推荐优秀underscore.js的template功能。

如何通过jQuery构建JSON并构建HTML

4 个答案: