Используя Phonegap, Json и jQuery mobile, как составить список заголовков, ссылающихся на отдельные статьи

Question

Я использовал Json для извлечения данных из сборки сайта в Wordpress (используя плагин Json API).Я использую JQuery Mobile для макета приложения в PhoneGap.Получить данные для отображения в Phonegap было не самой сложной задачей (код ниже).Но можно ли составить список заголовков разных постов и связать их с конкретной статьей и загрузить контент на страницу?В PHP вы можете просто использовать аргумент, но есть ли способ заставить что-то подобное работать в jQuery mobile?

Вот код, который я использовал.Также удобно, если кто-то случайно наткнулся на это сообщение с помощью Google.

    <script>          
        $(document).ready(function(){
            var url="http://127.0.0.1:8888/wp/api/get_recent_posts";
            $.getJSON(url,function(json){
                $.each(json.posts,function(i,post){
                    $("#content").append(
                    '<div class="post">'+
                    '<h1>'+post.title+'</h1>'+
                    '<p>'+post.content+'</p>'+
                    '</div>'
                    );
                });
            });
        });
    </script> 

РЕДАКТИРОВАТЬ:

Я хотел бы еще раз поблагодарить shanabus за помощь в этом.Вот код, с которым я работал:

    $(document).ready(function() {

        var url="http://127.0.0.1:8888/wpjson/api/get_recent_posts";
        var buttonHtmlString = "", pageHtmlString = "";

        var jsonResults;

        $.getJSON(url,function(data){
            jsonResults = data.posts;
            displayResults();       
        });

        function displayResults() {

            for (i = 0; i < jsonResults.length; i++) {
                buttonHtmlString += '<a href="#' + $.trim(jsonResults[i].title).toLowerCase().replace(/ /g,'') + '" data-role="button">' + jsonResults[i].title + '</a>';
                pageHtmlString += '<div data-role="page" id="' + $.trim(jsonResults[i].title).toLowerCase().replace(/ /g,'') + '">';
                pageHtmlString += '<div data-role="header"><h1>' + jsonResults[i].title + '</h1></div>';
                pageHtmlString += '<div data-role="content"><p>' + jsonResults[i].content + '</p></div>';
                pageHtmlString += '</div>';
            }

            $("#buttonGroup").append(buttonHtmlString);
            $("#buttonGroup a").button();
            $("#buttonGroup").controlgroup();
            $("#main").after(pageHtmlString);
        }

    });

Answer 1

Да, это возможно. Проверьте этот пример: http://jsfiddle.net/shanabus/nuWay/1/

Там вы увидите, что мы берем массив объектов, перебираем его и добавляем новые кнопки (и стиль jqm). Это делает то, что вы хотите сделать?

Я бы также порекомендовал улучшить ваш javascript, удалив $.each и подставив его в базовый цикл for:

for(i = 0; i < json.posts.length; i++)

Известно, что эта структура цикла работает лучше. То же самое с методом append. Я снова и снова слышал, что более эффективно создавать строковую переменную и добавлять ее один раз, а не вызывать ее несколько раз.

UPDATE

В ответ на ваш комментарий я опубликовал новое решение, имитирующее загрузку коллекции объектов контента Json для динамического добавления элементов page в ваше приложение. Он также динамически генерирует кнопки для ссылки на них.

Это работает, если вы делаете это в $(document).ready() и, возможно, в нескольких других событиях jQM, но вам, возможно, придется проверить документацию по этому вопросу или вызвать один из содержимого обновления методы, чтобы сделать страницы действительными.

http://jsfiddle.net/nuWay/4/

Надеюсь, это поможет!