我的设置是 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 不会启动它。另外,它是多页的,所以我认为在我点击链接之前数据需要在那里。
当我将把手包裹在 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;
});