jQuery Mobile JSON解析

Question

我正在嘗試使用jQuery Mobile製作跨平臺移動應用程序。

我有一個JSON字符串，顯示有關特定對象的信息（請在這裏查看：http://app.calvaryccm.com/mobile/web/teachings/json?callback=？），我希望它變成一個連接到單個項目視圖的列表視圖。問題是，listview並不像列表一樣顯示。它幾乎就像沒有CSS的HTML。看看這裏：http://mbeta.calvaryccm.com/#teachings

這是JavaScript解析JSON字符串：

<!-- Getting Teaching Data --> 
<script type="text/javascript"> 
$(document).ready(function() { 

    $.getJSON("http://app.calvaryccm.com/mobile/web/teachings/json?callback=?", 

    function (data) { 

     //remove any characters from the query that might be unsafe to use as an ID for a page 
     //data.pageId = data.MessageNumber.replace(/[^\w]/, ""); 

     //Feed the data to the template and add the new page to the body. 
     var res = $("#teachingTemplate").tmpl(data); //.appendTo(document.body); 
      $("#teachings").append(res); 

     //Grab a reference to that shiny new page 
     //var newpage = $("#" + data.pageId); 
    }); 
}); 

//Makes date readable 
function GetDate(jsonDate) { 
     var value = new Date(parseInt(jsonDate.substr(6))); 
     return value.getMonth() + 1 + "/" + value.getDate() + "/" + value.getFullYear(); 
    } 

這應該是列表視圖：

<script id="teachingTemplate" type="text/x-jquery-tmpl"> 
<div id="${MessageNumber}"> 

<div data-role="header"> 
    <a data-icon="arrow-l" href="#" data-rel="back">Back</a> 
    <h1>${Title}</h1> 
</div> 

<div data-role="content"> 


    <div class="teachingsForm"> 
     <ul data-role="listview"> 
      <li><a href="singleTeachingView" class="tableImage"> 
        <img src="" alt=""/> 
        <h3>${Title}</h3> 
        <p>${Speaker} - ${GetDate(MessageDate)} - ${MessageNumber} {{if Book != null}} - ${Book.BookName} ${ChapterVerse}{{/if}}</p> 
       </a> 
      </li> 
     </ul> 
    </div> 
</div> 

<div data-role="footer"> 
    <h4>2011 Calvary Chapel Melbourne</h4> 
</div> 

我不明白爲什麼我的lis tview沒有顯示正確。如果你想在行動中看到它，請看這裏：http://mbeta.calvaryccm.com/#teachings。我需要幫助讓我的列表視圖正確顯示並直接顯示在正確的頁面上。

Answer 1

它看起來完全像你的模板所說的那樣。請注意，您的每個<ul>元素中都只有一個<li>元素。

你的模板從外部<div>開始，然後有一個「標題」<div>和<h1>標題。然後是「內容」<div>，最終是<ul>，最後是「頁腳」。這就是你的結果頁面的樣子。如果你想做一些迭代，那麼你必須在你的模板中明確地做到這一點，否則模板代碼會假設你只是希望它重新將模板應用到數組中的每個對象交上來。

「JSON解析」沒有任何問題。請注意，在您的JSON中，不需要用「\」引用「/」字符，事實上（儘管對於JSONP無關緊要），它不是有效的JSON。

編輯 —好吧，現在我已經把我的頭從任何地方拉出來我想我明白你在做什麼。問題可能在於您只需致電

$.mobile.changePage(); 

您的JSONP回調函數結束時。但是我注意到你的「$ .mobile」沒有「changePage（）」函數......我不知道這意味着什麼。你也使用了一個相當老的jQuery版本。