使用 Phonegap、Json 和 jQuery mobile，如何制作链接到单个文章的标题列表

Question

我使用 Json 从 Wordpress 中构建的网站获取数据（使用 Json API 插件）。我使用 jQuery mobile 在 Phonegap 中进行应用程序的布局。让数据显示在 Phonegap 中并不是最难找到的事情（代码如下）。但是，是否可以列出不同帖子的标题并将它们链接到特定文章并将内容加载到页面中？在 PHP 中你可以只使用一个参数，但是有没有办法让这样的东西在 jQuery mobile 中工作？

这是我使用的代码。如果有人碰巧使用谷歌发现这篇文章也很方便。

    <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 样式）。这符合您想要做的吗？

我还建议通过删除 $.each 并将其替换为基本的 for 循环来改进您的 JavaScript：

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

众所周知，这种循环结构的性能更好。与 append 方法相同。我一次又一次地听说，构建一个字符串变量并追加一次比调用多次追加更有效。

更新

为了回应您的评论，我发布了一个新的解决方案，该解决方案模拟加载内容对象的 Json 集合，以动态地将 page 元素添加到您的应用程序中。它还动态生成链接到它们的按钮。

如果您在 $(document).ready() 以及可能的其他一些 jQM 事件中执行此操作，则此方法有效，但您可能必须检查 文档 或调用其中一个 刷新内容方法以使页数有效。

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

希望这有帮助！