Как структурировать JSON и построить HTML с помощью jQuery - PullRequest
Новая
       1

Как структурировать JSON и построить HTML с помощью jQuery

6 голосов
/ 31 июля 2010

Здесь начинающий пытается найти лучший способ структурировать JSON и вывести ниже вложенный

Ответы [ 4 ]

5 голосов
/ 31 июля 2010

Вместо этого вы можете использовать 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);
});
5 голосов
/ 31 июля 2010

В последнее время я стал большим поклонником mustache.js за то, что делал именно такие вещи.

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

Edit:

если я немного подправлю формат 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/

3 голосов
/ 31 июля 2010

Первая рекомендация - взглянуть на сайт JSON .В нем есть несколько примеров кода JSON на JavaScript.

Если вы структурируете все это из 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) .

Надеюсь, это поможет вам начать работу.

2 голосов
/ 31 июля 2010

Я бы порекомендовал отличную underscore.js template функцию для такого рода вещей.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...