JQuery Mobile JSON парсинг - PullRequest
Новая
       2

JQuery Mobile JSON парсинг

0 голосов
/ 23 декабря 2011

Я пытаюсь создать кроссплатформенное мобильное приложение, используя jQuery Mobile.

У меня есть строка JSON, которая отображает информацию о конкретном объекте (проверьте ее здесь: http://app.calvaryccm.com/mobile/web/teachings/json?callback=?), и я хочу, чтобы она превратилась в представление списка, которое подключается к представлению одного элемента.проблема в том, что представление списка вообще не отображается как список. Это почти как HTML без CSS. Проверьте это здесь: 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>

Я не могу понять, почему мой список не отображается правильно. ЕслиВы хотите увидеть это в действии, смотрите здесь: http://mbeta.calvaryccm.com/#teachings. Мне нужна помощь, чтобы мой список отображался правильно и прямо на нужной странице.

1 Ответ

1 голос
/ 23 декабря 2011

Это выглядит точно так же, как и в вашем шаблоне.Обратите внимание, что каждый из ваших <ul> элементов содержит только один <li> элемент.

Ваш шаблон начинается с внешнего <div>, а затем есть "заголовок" <div> с <h1> заглавие.Затем есть «контент» <div>, и в конечном итоге <ul>, и, наконец, «нижний колонтитул».Вот как выглядит ваша страница результатов.Если вы хотите выполнить какую-то итерацию , вам придется явно сделать это в своем шаблоне, потому что в противном случае код шаблона будет предполагать, что вы просто захотите повторно применить шаблон к каждому объекту.в массиве вы передаете его.

Нет ничего плохого в "разборе JSON".Обратите внимание, что в вашем JSON нет необходимости заключать в кавычки символы "/" с помощью "\", и фактически (хотя это не имеет значения для JSONP) это недопустимый JSON.

edit - Хорошо, теперь, когда я вытащил свою голову оттуда, где это было, я думаю, что вижу, что ты делаешь.Проблема может заключаться в том, что вам просто нужно вызвать 

$.mobile.changePage();

в конце функции обратного вызова JSONP.Однако я отмечаю, что ваш «$ .mobile» не имеет функции «changePage ()» ... Я не знаю, что это значит.Вы тоже используете довольно старую версию jQuery.

...