2

私の質問を見てくれてありがとう。HTML、JQuery、および JSON は初めてです。私はいくつかのオンライン チュートリアルと www.lynda.com トレーニングで独学しようとしています。ページに用語のリストを動的に表示する用語集を作成しようとしています。クリックすると、用語がヘッダーに表示され、その下に定義が表示されます。検索と実験の後、私は進歩を遂げました.JSonオブジェクトからulを取得し、表示ページにリンクしました. しかし、表示ページを機能させる方法として途方に暮れています。答えはhttp://jquerymobile.com/demos/1.1.1/docs/pages/page-dynamic.htmlにあると思いましたが、Dreamweaver でさえ、それをうまくやってのけることができないようです。

JSFiddle は次のとおりです: http://jsfiddle.net/LParker/PSntK/3/

HTML:

    <!-- Glossary -->
<div data-role="page" id="glossary">
<div data-role="header">
     <h3>
        Glossary
    </h3>
</div>
<ul data-role='listview' data-inset='true' id='resultsList'>
<!-- keep empty for dynamically added items -->
</ul>
</div>
    <!-- display -->
    <div data-role="page" id="display">
    <div data-role="header">
         <h3>
            Name Goes Here
        </h3>
    </div>
    <div data-role="content">
    <div>Definition goes here</div>
</div>

JavaScript:

var jsonObject = {
"results": [{

    "term": "Term One",
        "definition": "This is the definition for Term Two",

},

{
    "term": "Term Two",
        "definition": "This is the definition of Term Two",

}, {
    "term": "Term Three",
        "definition": "This is the definition for Term Three",
}],
    "ok": "true"
}

var resultLength = jsonObject.results.length;
var listItems = [];



for (var i = 0; i < resultLength; i++) {
var term = jsonObject.results[i].term;


//Add result to array
listItems.push("<li><a href='#display'>" + term + " </a></li>");
}

//Append array to list and refresh
$('#resultsList').append(listItems.join(' '));
$('#resultsList').listview('refresh');

どんな助けでも大歓迎です！

4

1 に答える 1

5

まず、邪魔にならないようにいくつかのことをしましょう。

  1. definitionjsonオブジェクトの各メンバーの後に余分なコンマを捨てます。
  2. #resultsListリストビューをコンテナに入れます<div data-role="content"></div>。
  3. たとえば、ページのヘッダーに標準のjQM戻るボタンを追加することにより、ページから#displayページに戻る手段を提供します。#glossary<a data-role="button" data-rel="back" data-icon="back">Back</a>#display
  4. jQMを使用する場合は、適切なイベントハンドラーを使用する必要があります

簡潔にするために、変数の名前をに変更jsonObjectしましたjson。

より簡潔な方法でリストビューにデータを入力できます。

$.each(json.results, function(i, term){
    $('#resultsList').append('<li><a href="#display">' + term.term + '</a></li>')
});
$('#resultsList').listview('refresh');

この特定のケースでは、IMHOでページを挿入する必要はありません（確かに可能ですが）。イベントで#displayページのコンテンツを変更するだけです。pagebeforeshow

そのためには、jsonオブジェクトがグローバルに利用可能であるため、クリックされたリストアイテムのインデックスを取得し、それを#displayページに渡し、それを使用してjsonオブジェクトの結果配列にアクセスし、用語とその定義を抽出して表示できます。インデックスを渡す最も簡単な方法は、clickイベントハンドラーで設定したグローバル変数を使用することです。

var currentItem = 0;
...
$('#resultsList li').click(function(){
    currentItem = $(this).index();
});

今pagebeforeshowあなたがするイベントで

$('#display').on('pagebeforeshow', function(){
    $(this).find('[data-role=header] .ui-title').text(json.results[currentItem].term);
    $('#definition').html(json.results[currentItem].definition);
});

最後に、ここでjsFiddleが機能しています。

于 2013-02-28T07:30:16.743 に答える