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的列表/詳細信息視圖

回答

相關問題