如何使用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>