JQuery移动列表/详细信息视图

Question

我有一个JQuery移动列表视图，如下所示：

 {
     "title": "Available Cars",
     "names": [
         {
             "name": "Ford",
             "image": "./images/ford.png",
             "flags": "./images/us.png",
             "description": "Make Average Cars",
             "detail": [
                 {
                     "Profile": "Big US company",
                     "Background": "Started some time ago"
                 }
             ]
         },
         {
             "name": "BWM",
             "image": "./images/bmw.png",
             "flags": "./images/gm.png",
             "description": "Make Great Cars",
             "detail": [
                 {
                     "Profile": "MediumGermancompany",
                     "Background": "Startedsometimeago"
                 }
             ]
         },
         {
             "name": "VW",
             "image": "./images/vw.png",
             "flags": "./images/gm.png",
             "description": "MakeGoodCars",
             "detail": [
                 {
                     "Profile": "LargeGermancompany",
                     "Background": "Startedsometimeago"
                 }
             ]
         }
     ]
 }

这个JSON使用我的模板库动态地呈现到适当的HTML中，该模板库根据名称和第一级中的相关图像创建一个简单的列表视图。

我希望将"description"：部分中的数据呈现到数据的详细视图中。因此，当单击列表项时，它会转换为详细视图。

因为我已经有了所有需要的数据，所以我不需要向服务器发出进一步的请求。

我已经完成了第一部分，这里有一个jsfiddle，它展示了它的工作：

http://jsfiddle.net/carlskii/7WK7P/30/

既然在这里找不到任何像样的例子，谁能建议一种方法来做这件事吗？

Answer 1

既然是jQuery Mobile is about to deprecate nested Lists，你最好的选择就是普通的老式导航。创建一个包含所需链接的页面(例如，模板中的名称)：

<div data-role="page" data-url="/damyanpetev/7WK7P/36/show/light/Ford">
        TEST PAGE FOR FORD
</div>

并将项目模板中的'href‘作为名称，它将导航并保留一个历史堆栈和所有优点:)请参阅AJAX NAvigation的帮助。

下面是我修改后的小提琴：http://jsfiddle.net/damyanpetev/7WK7P/36/ (实际演示部分见下文)

附言: jsFiddle让我很难找到链接..因此，这将仅在所有帧之外正确导航- http://fiddle.jshell.net/damyanpetev/7WK7P/36/show/light/