我的设置是 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>
URL 更改为 localhost/index.html#documentID20。太好了，链接有效。
问题是，我无法让页面加载特定于 documentID20 的数据。如果 JavaScript 位于 data-role="page"div 之外，JQM 不会启动 JavaScript。另外，它是多页的，所以我认为在点击链接之前数据需要在那里。
当我将 Handlebars 包裹在 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 文件中，以便在工作时获取each_when。
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>
关于json - 如何使用 Handlebars.js、JSON 和多页面 jQuery Mobile 获取动态页面？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13237003/