Question

我有一个JQuery Mobile List视图，如下所示：

 {
     "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/（参见下面的实际演示部分）

P.S。：jsFiddle让我很难为我指路..所以这只能在所有帧中正确导航 - http://fiddle.jshell.net/damyanpetev/7WK7P/36/show/light/

JQuery Mobile List / Detail视图

1 个答案: