Как использовать шаблоны jQuery и jQuery для создания вложенных представлений списка на основе вложенных данных JSON. - PullRequest
Новая
       25

Как использовать шаблоны jQuery и jQuery для создания вложенных представлений списка на основе вложенных данных JSON.

4 голосов
/ 28 июля 2011

У меня есть вызов AJAX, возвращающий следующий JSON: 

{
"categories": [
    {
        "active": true,
        "name": Cat1,
        "items": [
            {
                "active": true,
                "id": 1,
    },
            {
        "active": true,
                "id": 2,
    }
  ]
},
{
    "active": true,
        "name": Cat2,
        "items": [
            {
                "active": true,
                "id": 3,
    },
            {
        "active": true,
                "id": 4,
    }
  ]
}
]}

, и я хочу, чтобы имена категорий верхнего уровня переходили в одно представление списка, а идентификаторы элементов нижнего уровня переходили в другой списокуровень после щелчка по элементу родительской категории.

В настоящее время у меня есть код, работающий для создания просмотра списка категорий верхнего уровня, как показано ниже (это JQM): 

<div data-role="content">
  <script id="Template-categories" type="text/x-jquery-tmpl">
    <li data-theme="a" class="ui-btn ui-btn-icon-right ui-li ui-li-has-alt ui-btn-up-a">
      <div class="ui-btn-inner ui-li ui-li-has-alt">
        <div class="ui-btn-text">
          <a href="#${name}" class="ui-link-inherit">
              <h3 class="ui-li-heading">${name}</h3>
          </a>
        </div>
      </div>        
    </li>
  </script>
  <ul data-role="listview" id="listview-categories" data-theme="a">

  </ul>

И этозапрос AJAX: 

<script> // JSONP for ALL
  $(document).ready(function() {
      $.ajax({
                url: "http://####.heroku.com/api/all_categories.json",
                data: "format=json",
                cache: false,
                dataType: "jsonp",
                type: 'GET',
                timeout: 5000,
                success: function(data) {
                  $.each(data, function() {
                    $("#Template-categories").tmpl(data.categories).appendTo("#listview-categories");
                  });
                  $.each(data, function() {
                    // THIS IS WHERE I GET LOST! How to then break down the category 1 items and category 2 items into their own listview dynamically!
                  });
                },
                error: function()
                  { alert('BOOOO Error');}
    });
});

Итак: у меня работает верхний уровень, мне просто нужно получить второй уровень (.items), чтобы вывести список представлений, подчиненных ихродительский элемент (категории).Если это сложная проблема, даже рассказать мне, как я мог бы вручную выполнить цикл each с оператором if для категории 1 (например, если name=Category 1 затем выполнить цикл по массиву элементов), что было бы полезно, так как я мог простожестко запишите это в html сейчас.

Спасибо!

РЕДАКТИРОВАТЬ: пробовал этот код ...

Я думаю, одна вещь, которую я не понимаю, почему это нене работает ... 

success: function(data) {
                  $.each(data, function() {
                    $("#Template-categories").tmpl(data.categories).appendTo("#listview-categories");
                  });
                  $.each(data, function() {
                    if(data.categories.name == "Cat1"){
                      $("#Template-cat1").tmpl(data.categories.items).appendTo("#listview-cat1");
                    }
                  });

И затем в моем шаблоне просто используется атрибут ${id} и еще много чего для отображения значений из массива элементов.

1 Ответ

1 голос
/ 28 июля 2011

Это на самом деле довольно просто, правда. Внутри вашего текущего шаблона используйте синтаксис {{each}} для создания подсписка. В документации есть довольно хорошие примеры: http://api.jquery.com/template-tag-each/

ОБНОВЛЕНИЕ с примером:

  • обратите внимание, что были ошибки в объекте json, которые я исправил в примере ... 
var myData = {
   categories: [
      { active: true, name: "Cat1", items: [ 
      { active: true, id: 1 },
      { active: true, id: 2 } ]
  },
  { active: true, name: "Cat2", items: [
      { active: true, id: 3 },
      { active: true, id: 4 } ]
  } ]
};

$(function () {

$ ( "# Template-категория") TMPL (MyData) .appendTo ( "# ListView-категория").; }); 

<script id="Template-categories" type="text/x-jquery-tmpl">
<ul>
{{each categories}}
<li data-theme="a" class="ui-btn ui-btn-icon-right ui-li ui-li-has-alt ui-btn-up-a">
    <div class="ui-btn-inner ui-li ui-li-has-alt">
        <div class="ui-btn-text">
            <a href="#${name}" class="ui-link-inherit">
                <h3 class="ui-li-heading">${name}</h3>
            </a>
        </div>
        <div> <ul>
        {{each items}}
            <li> item : ${name}</li>
        {{/each}}
        </ul> </div>
    </div>
</li>
{{/each}}
</ul>      
</script>

<div id="listview-categories"> </div>

...