如何使用jQuery和jQuery模板創建基於嵌套JSON數據的嵌套列表視圖。

Question

我有一個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, 
    } 
    ] 
} 
]} 

，我希望發生的是具有頂級類別名稱到一個列表視圖和底層項ID去到另一個列表級別一旦什麼父類別項目被點擊。

目前，我的代碼工作創造了頂級類別列表視圖，如下所示（這是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循環與類別1的if語句（例如，如果name=Category 1然後循環通過items數組），這將是有益的，因爲我可以將它硬編碼到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}屬性以及不能顯示items數組中的值。

Answer 1

這其實很簡單，真的。在當前模板中使用{{each}}語法創建子列表。有文檔中相當不錯的例子：http://api.jquery.com/template-tag-each/

UPDATE W /例如：

• 注意，有在我的例子havve糾正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-categories」）。tmpl（myData）.appendTo（「＃listview-categories」）; }）;

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