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然后遍历项目数组）很有帮助，因为我现在可以将其硬编码到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}属性和whatnot来显示items数组中的值。

Answer 1

实际上它非常简单。在当前模板中，使用{{each}}语法创建子列表。文档中有很好的例子：http://api.jquery.com/template-tag-each/

更新w /示例：

请注意，我在示例中已经纠正了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 () {

$（ “＃模板类别”）TMPL（MYDATA的）.appendTo（ “＃列表视图类别”）。 }）;

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

如何使用jQuery＆amp; jQuery模板，用于基于嵌套的JSON数据创建嵌套列表视图。

1 个答案: