How I get dynamic pages with Handlebars.js, JSON, and multi-page jQuery Mobile?

Question

My setup is jQuery Mobile (JQM), multi-page, JSON, and Handlebars.js.

I have a list of items. Each item links to a full page description.

<div data-role="page" id="document-library">

<div data-role="content">

    <ul>
    <div id="handlebarsDocuments">This will get replaced by handlebars.js</div>
    <script id="TemplateDocuments" type="text/x-handlebars-template">

        {{#documents}}
            <li style="float:left;padding:10px 0;width:100%;">
                <a href="#documentID{{documentID}}" data-transition="slide">
                    <strong>{{documentName}}</strong>
                </a>
            </li>
        {{/documents}}

    </script>
    </ul>

</div>

The URL changes to localhost/index.html#documentID20. Great, the links work.

Problem is, I can't get the page to load the data specific to documentID20. JQM doesn't initiate JavaScript if it's sitting outside the data-role="page" div. Plus, it's multi-page so I'm thinking the data needs to be there before I click the link.

When I wrap handlebars around data-role="page" it does not work.

<div id="handlebarsDocView">This will get replaced by handlebars.js</div>
<script id="TemplateDocView" type="text/x-handlebars-template">
    {{#documents}}

         <div data-role="page" id="document{{documentID}}">

              <div data-role="content"> 
                   {{#each_when documents "documentID" "20"}}
                        {{documentName}}
                   {{/each_when}}
              </div>

         </div>

    {{/documents}}
</script>

The JSON file looks like...

{
"documents": [
    {
        "documentID": 20,
        "conversationID": 100,
        "documentName": "K1711EA1 Course",
        "timeStamp": "2012-10-09T12:51:50Z",
        "documentType": "documents"
    },
    {
        "documentID": 21,
        "coversationID": 100,
        "documentName": "K17E10CTEC Student",
        "timeStamp": "2012-10-09T07:51:50Z",
        "documentType": "pdf"
    }
]
}

This has been added to my handlebars.js file to get each_when working.

Handlebars.registerHelper('each_when', function(list, k, v, opts) {
console.log(arguments);
var i, result = '';
for(i = 0; i < list.length; ++i)
    if(list[i][k] == v)
        result = result + opts.fn(list[i]);
return result;
});

Can you show the code where you are compiling your handlebars? Also this statement is not true: 'JQM doesn't initiate JavaScript if it's sitting outside the data-role="page" div'. JavaScript does not need to be called from a page role. — Brian Cajes
Here's a slimmed down version of the setup. c9.io/aaronkahlhamer/cw-mobile-dev/workspace/index-demo.html The first item is clickable and loads. When I wrap handlebars around data-role="page" it does not work - see example above. — user1552119

rodmjay rodmjay · Accepted Answer · 2012-11-09T17:50:45

<!DOCTYPE html> 
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Client Portal</title>
<link rel="stylesheet" href="stylesheets/styles.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.mobile-1.2.0.js?v=6"></script>
</head> 

<body onload="init()">

<script type="text/javascript" src="js/handlebars-1.0.rc.1.js"></script>


<!-- Document Library -->

<div data-role="page" id="document-library">

    <div data-role="content">

        <ul>
        <div id="handlebarsDocuments">This will get replaced by handlebars.js</div>

        <script id="TemplateDocuments" type="text/x-handlebars-template">

            {{#documents}}
                <li style="float:left;padding:10px 0;width:100%;">
                    <a href="#documentID{{documentID}}" data-transition="slide">
                        <strong>{{documentName}}</strong>
                    </a>
                </li>
            {{/documents}}

        </script>
        </ul>



    </div>


</div>

<!-- Document View-->

<script id="Foo" type="text/x-handlebars-template">

    {{#documents}}

        <div data-role="page" id="documentID{{documentID}}">

            Document Name {{documentName}}<br/>
            Document ID: {{documentID}}<br/>
            Conversation ID: {{conversationID}}

        </div>

    {{/documents}}

</script>


<script>
// Handlebar
var xhr;

        function init() {

            xhr = new XMLHttpRequest();
            xhr.onreadystatechange = xhr_onReadyStateChangeHandler;
            xhr.open("GET", "json/data.json");
            xhr.send(null);
        }
        function xhr_onReadyStateChangeHandler(evt) {
            if ((xhr.readyState === 4) && (xhr.status === 200)) {
                var src = document.getElementById("TemplateDocuments").innerHTML;

                var tmpl = Handlebars.compile(src);
                var json = JSON.parse(xhr.responseText);
                document.getElementById("handlebarsDocuments").innerHTML = tmpl(json);


                 src = $('#Foo').html();
                 tmpl = Handlebars.compile(src);
                $('#document-library').after(tmpl(json));

            }
        }
</script>
</body>
</html>

How I get dynamic pages with Handlebars.js, JSON, and multi-page jQuery Mobile?

1 Answers