Использование 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> 

EDIT:

Я хотел бы поблагодарить 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, но вы можете проверить documentation на то или вызвать один из методов refresh content сделать страницы действительными.

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

Надеется, что это помогает!