如何使用handlebar.js、JSON和多页jQuery Mobile获取动态页面？_Json_Jquery Mobile_Handlebars.js

如何使用handlebar.js、JSON和多页jQuery Mobile获取动态页面？

json jquery-mobile

如何使用handlebar.js、JSON和多页jQuery Mobile获取动态页面？,json,jquery-mobile,handlebars.js,Json,Jquery Mobile,Handlebars.js,我的设置是jQuery Mobile（JQM）、多页、JSON和handlebar.js 我有一份物品清单。每个项目链接到一个完整的页面描述 <div data-role="page" id="document-library"> <div data-role="content"> <ul> <div id="handlebarsDocuments">This will get replaced by handlebars.js

我的设置是jQuery Mobile（JQM）、多页、JSON和handlebar.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>

这已添加到我的handlebar.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;
});

handlebar.registerHelper（'each_when'，函数（列表、k、v、选项）{
log（参数）；
var i，结果=“”；
对于（i=0；i


客户端门户

这将被handlebar.js取代
{{{文件}


{{/documents}}

{{{文件}
文档名称{{documentName}}

文档ID:{{documentID}}

会话ID:{{conversationID}
{{/documents}}
//车把
var-xhr；
函数init（）{
xhr=newXMLHttpRequest（）；
xhr.onreadystatechange=xhr\u onReadyStateChangeHandler；
open（“GET”，“json/data.json”）；
xhr.send（空）；
}
函数xhr\u onReadyStateChangeHandler（evt）{
如果（（xhr.readyState==4）和&（xhr.status==200））{
var src=document.getElementById（“TemplateDocuments”）.innerHTML；
var tmpl=handlebar.compile（src）；
var json=json.parse（xhr.responseText）；
document.getElementById（“handlebarsDocuments”）.innerHTML=tmpl（json）；
src=$（'#Foo'）.html（）；
tmpl=handlebar.compile（src）；
$（“#文档库”）.after（tmpl（json））；
}
}

能否显示编译车把的代码？同样，这句话也不是真的：“如果JQM位于data role=“page”div”之外，它不会启动JavaScript。JavaScript不需要从页面角色调用。第一项可单击并加载。当我在data role=“page”周围缠绕把手时，它不起作用-请参见上面的示例。
{
"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.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;
});

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