0

我有一个看起来像这样的 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，该模板库根据第一级中的名称和关联图像创建一个简单的列表视图。

我想将“描述”中的数据：部分呈现为数据的详细视图。因此，当单击列表项时，它会转换到详细视图。

由于我已经拥有了所有必需的数据，因此我不需要向服务器发出进一步的请求。

我已经完成了第一部分，这是一个 jsfiddle 显示它的工作原理：

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

有人可以建议一种方法来做到这一点，因为在这里似乎找不到任何像样的例子！

4

1 回答 1

3

好吧，既然jQuery Mobile 即将弃用嵌套列表，那么最好的选择是普通的旧导航。创建一个带有所需链接的页面（例如模板中的名称）：

<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/（见下文实际演示部分）

PS：jsFiddle让我很难确定链接..所以这只会在所有框架中正确导航 - http://fiddle.jshell.net/damyanpetev/7WK7P/36/show/light/

于 2013-04-15T17:16:44.050 回答