使用Handlerbars与雅虎管道(Using Handlerbars with Yahoo Pi

我试图拉JSON从雅虎管道源入使用Handlebars.js与jQuery的AJAX方法我jQuery Mobile的项目源。 此方法效果不车把，但也有一定的局限性。 它不会在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);
    }
});

下面是另一种方法，我一直试图与把手使用，但很明显，我失去了一些东西的地方源。

    $.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");

因为触发（“创建”），用于提高整个数据角色就会失败=“内容”，不只是它的一部分，所以这样应该只在数据角色使用=“内容”股利。

了解更多关于它在这个其他的答案 。

还是看看我的博客文章中，你会发现从远程JSON数据创建列表视图的工作示例。

更新：

如果你正在使用jQuery Mobile的1.4试试这个行：

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

.enhanceWithin（）是在jQuery Mobile的1.4中引入取代所有其它方法的方法。

更新2

这个问题终于在回答另一个问题 ，或者你可以找到它在这里与工作示例：

文章来源: Using Handlerbars with Yahoo Pipes