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 に動的にレンダリングされます。テンプレート ライブラリは、最初のレベルの名前と関連する画像に基づいて単純なリスト ビューを作成します。

"description": セクション内のデータをデータの詳細ビューにレンダリングしたいと考えています。したがって、リスト項目をクリックすると、詳細ビ​​ューに遷移します。

必要なデータはすべて揃っているので、サーバーにさらに要求を行う必要はありません。

私は最初の部分を完了し、それが機能していることを示す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 に答える