Using Handlerbars with Yahoo Pipes

问题:

I'm trying to pull JSON feeds from a yahoo pipes source into my jQuery Mobile project using Handlebars.js with jQuery's ajax method. This method works without Handlebars, but there are some limitations. It doesn't show up in jquerymobile listview format, instead it pops out like a normal bullet list. Here's the source:

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);
    }
});

Here's the source for the other method I've been trying to use with Handlebars but obviously I'm missing something somewhere.

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

Here's the html source for the template

            <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>

Anyone, please help me out please

回答1:

From what I can see you are using an older version of jQuery Mobile (lower then 1.4).

Do it like this:

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');
    }
});

Look at this line:

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

It will enhance dynamically added listview, of course there's one more thing, you need need to trigger it after whole dynamic list has been done and not on every li element, it will fail in this case. In your next example you are using this line:

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

It will fail because trigger('create') is used to enhance whole data-role="content" not just part of it so as such it should be used only on data-role="content" div.

Read more about it in this other answer.

Or take a look at my blog article, there you will find a working example of listview created from remote JSON data.

Update:

If you are using jQuery Mobile 1.4 try this line:

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

.enhanceWithin() is method introduced in jQuery Mobile 1.4 to replace all other methods.

Update 2

This question is finally answered in another question, or you can find it here with working example: