Question

我的设置是jQuery Mobile（JQM），多页面，JSON和Handlebars.js。

我有一个项目列表。每个项目都链接到完整的页面描述。

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

网址更改为localhost / index.html＃documentID20。很棒，链接工作。

问题是，我无法让页面加载特定于documentID20的数据。如果JQM位于data-role =“page”div之外，则不会启动JavaScript。另外，它是多页的，因此我认为在点击链接之前数据需要存在。

当我在data-role =“page”周围包裹把手时，它不起作用。

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

JSON文件看起来像......

{
"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"
    }
]
}

这已被添加到我的handlebars.js文件中以使每个工作正常。

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

Answer 1

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

我如何使用Handlebars.js，JSON和多页面jQuery Mobile获取动态页面？

1 个答案: