Question

我正在尝试使用带有jQuery的ajax方法的Handlebars.js将JSON提要从yahoo管道源提取到我的jQuery Mobile项目中。此方法在没有Handlebars的情况下工作，但存在一些限制。它没有以jquerymobile列表视图格式显示，而是像普通的项目符号列表一样弹出。这是来源：

var pipeURL = "http://pipes.yahoo.com/pipes/pipe.run?_id=mu3NkfY_3BGtncSIJhOy0Q&_render=json";

$.ajax({
    url : pipeURL,
    dataType : "json",
    success : function(data) {
        console.log(data);
        var html = '<ul data-role="listview" id="all-posts-two" data-filter="" data-count-theme="c">';
        $.each(data.value.items, function(i, item) {
            html += "<li>" + item.title + "</li>";
        });
        html += "</ul>";

        //Add the feed to the page
        $("#PostsList").empty().html(html);
    }
});

这是我试图与Handlebars一起使用的另一种方法的来源，但显然我在某处遗漏了某些东西。

    $.ajax({
    url : pipeURL,
    dataType : "json",
    success : function(data) {

        //line to check the received data on the console
        console.log(data);


        //handlebars area
        var source = $("#posts-template").html();
        var template = Handlebars.compile(source);
        var blogData = template(data);
        $("#all-posts").append(blogData);
        $("#all-posts").trigger("create");
        dfd.resolve(data);

    },
    error : function(data) {
        // console.log(data);
    }
});

这是模板的html源代码

            <ul data-role="listview" id="all-posts" data-filter=""></ul>
            <script id="posts-template" type="text/x-handlebars-template">
                {{#each value.items}}
                <li data-postid="{{ID}}">
                    <a data-transition="slide" href="#">
                        <p>{{{title}}}</p>
                    </a>
                </li>
                {{/each}}
            </script>

任何人，请帮帮我

Answer 1

从我可以看到你使用的是旧版本的jQuery Mobile（低于1.4）。

这样做：

var pipeURL = "http://pipes.yahoo.com/pipes/pipe.run?_id=mu3NkfY_3BGtncSIJhOy0Q&_render=json";

$.ajax({
    url : pipeURL,
    dataType : "json",
    success : function(data) {
        console.log(data);
        var html = '<ul data-role="listview" id="all-posts-two" data-filter="" data-count-theme="c">';
        $.each(data.value.items, function(i, item) {
            html += "<li>" + item.title + "</li>";
        });
        html += "</ul>";

        //Add the feed to the page
        $("#PostsList").empty().html(html);
        $('#all-posts-two').listview('refresh');
    }
});

看看这一行：

$('#all-posts-two').listview('refresh');

它将增强动态添加的列表视图，当然还有一件事，你需要在完成整个动态列表之后触发它而不是每个li元素，在这种情况下它将失败。在下一个示例中，您使用的是以下行：

$("#all-posts").trigger("create");

它会失败，因为触发器（＆＃39;创建＆＃39;）用于增强整个 data-role =＆＃34;内容＆＃34; 不只是其中的一部分，因此它只应用于 data-role =＆＃34; content＆＃34; div。

在其他 answer 中详细了解它。

或者看看我的博客article，你会在那里找到一个从远程JSON数据创建的listview的工作示例。

更新

如果您使用的是jQuery Mobile 1.4，请尝试以下行：

$('#all-posts-two').enhanceWithin();

.enhanceWithin（）是jQuery Mobile 1.4中引入的方法，用于替换所有其他方法。

更新2

最后在另一个 question 中回答了这个问题，或者您可以通过工作示例找到它here：

使用Handlebars和Yahoo Pipes

1 个答案:

更新

更新2