Javascript jQuery移动JSON解析

我正在尝试使用jQuery mobile制作一个跨平台的移动应用程序

我有一个JSON字符串，用于显示特定对象的信息（请在此处签出：？），我希望它将其转换为连接到单个项视图的列表视图。问题是，listview根本不像列表那样显示。它几乎就像没有CSS的HTML。在这里查看：

这是用于解析JSON字符串的Javascript：

<!-- 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();
    }

$（文档）.ready（函数（）{
$.getJSON（“http://app.calvaryccm.com/mobile/web/teachings/json?callback=?",
功能（数据）{
//从查询中删除用作页面ID可能不安全的任何字符
//data.pageId=data.MessageNumber.replace（/[^\w]/，“”）；
//将数据馈送到模板，并将新页面添加到正文中。
var res=$（“#teachingTemplate”）.tmpl（数据）；/.appendTo（document.body）；
$（“#教学”）。追加（res）；
//抓取一个对那个闪亮的新页面的引用
//var newpage=$（“#”+data.pageId）；
});
});
//使日期可读
函数GetDate（jsonDate）{
var值=新日期（parseInt（jsonDate.substr（6））；
返回值.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>

${Title}




2011墨尔本加略山教堂

---

我不明白为什么我的listview显示不正确。如果您想看到它的运行，请查看此处：。我需要帮助使我的listview正确显示并直接显示到正确的页面。

它看起来与模板所说的完全一样。请注意，每个

元素中只有一个

元素

模板以外部的

开始，然后是带有

标题的“标题”

。然后是“内容”

，最后是

，最后是“页脚”。这就是您的结果页的外观。如果您想进行某种迭代，那么必须在模板中显式地进行，因为否则模板代码将假定您只希望它将模板重新应用于传递给它的数组中的每个对象

“JSON解析”并没有错。请注意，在JSON中，不需要用“\”引用“/”字符，事实上（尽管这对JSONP并不重要），它不是有效的JSON

编辑-好的，现在我已经把我的头从任何地方拉出来了，我想我明白你在做什么了。问题可能是你只需要打个电话

$.mobile.changePage();

---

在JSONP回调函数的末尾。但是我注意到您的“$.mobile”没有“changePage（）”函数。。。我不知道那是什么意思。您也在使用一个非常旧的jQuery版本。

您能解释一下您希望它看起来像什么吗，我不明白。还想知道为什么你有一个空的img标签在那里？我有一个空的图像标签在那里为未来。在以后的开发中，JSON字符串将包含在每个教学的图像中。我希望它看起来像这样：但我不知道怎么做。好吧，我想我已经开始了解这个交易是什么了。我猜想，在JSON内容从服务器返回后，您必须做一些事情，告诉jQuery再次查看内容，以便它发挥其魔力。我将尝试找出如何执行此操作。在执行“.tmpl（）”调用后，您是否尝试在JSONP回调函数中添加对“$.mobile.changePage（）”的调用？我刚刚执行了此操作，现在页面发生了更改，但不包含任何数据。如何将其转换为listview格式？当用户单击列表项时，我想要单项样式。我不知道“listview格式”是什么意思。你在这个问题上得到的只是模板和数据。让它看起来像你想要的方式就是让模板做你想要的。我还不知道那是什么。如果你澄清了这个问题，例如，显示你想要的结果HTML是什么样子，那么也许我或其他人可以帮助你。首先感谢你的帮助！我希望第一页看起来像这样：

I>

，带有教学列表。当用户单击时，第二个页面将显示如上所示的单个教学模板。那么您希望将视图划分为单独的页面吗？嗯，这可能会涉及更多，除非jQuery Mobile已经有某种机制来支持这一点。（你发布jQuery移动示例的lnk给了我一个空白的灰色页面…）哦，等等，我现在可以看到jQuery的内容了。让我看一下。