用JQuery Mobile和Json動態注入頁面

Question

感謝您查看我的問題。我是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'); 

任何幫助，將不勝感激！

Answer 1

首先讓我們得到了一些東西出來的方式：你的JSON對象的每個成員definition後

1. 溝額外的逗號。
2. 將您的#resultsList列表視圖放入<div data-role="content"></div>容器中。
3. 提供從#display頁面導航回#glossary頁面的方式。通過在#display頁面的標題中添加標準jQM後退按鈕<a data-role="button" data-rel="back" data-icon="back">Back</a>。
4. 雖然與JQM工作，你需要使用適當的event handlers

爲了簡便起見我改名爲您的變量jsonObject到json。

你可以在一個更簡潔的方式填充ListView：在特定情況下

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

現在，恕我直言，你並不需要注入的頁面（雖然它當然是可能的），你只需改變#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你。