jQuery Mobile的列表/详细信息视图

我有一个jQuery Mobile的列表视图看起来像这样：jQuery Mobile的列表/详细信息视图

{ 
    "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/

可能有人请提出一个办法做到这一点，因为似乎无法在这里找到任何像样的例子！

来源

2013-04-15 user1513388

自从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”是名称以及它都将会naviogate并保留历史堆栈和所有善良:)请参阅AJAX NAvigation的帮助。

这里是我的修改小提琴：http://jsfiddle.net/damyanpetev/7WK7P/36/（参见下面的实际演示部分）

PS：的jsfiddle使得它真的很难，我的指甲链接..所以这只会正常浏览了所有的帧 - http://fiddle.jshell.net/damyanpetev/7WK7P/36/show/light/

来源

2013-04-15 17:16:44

不错！ - 非常感谢您的提示！是我，但页面之间的页面渲染看起来有点笨重吗？即我可以快速浏览一些无格式的HTML！ – user1513388

是的，这是您在脚本末尾追加的测试列表 - 因为它位于主体（jQuery Mobile页面之外）中，所以在过渡期间它是可见的。没有测试列表 - http://fiddle.jshell.net/damyanpetev/7WK7P/39/show/light/ :) –

jQuery Mobile的列表/详细信息视图

回答

相关问题