我尝试学习英特尔 Appframework UI。
我想用两个面板构建一个简单的离线应用。 一个面板包含一个包含项目（链接）的列表，第二个面板应显示所选项目的详细信息。第二个面板中的详细信息应使用 javascript 填充。
如何将数据（例如数字 item_id）传递到第二个面板，以便我的 javascript 可以访问它并将其填充到详细信息页面中？
我可以使用列表中链接的部分url吗，像这样：
<li>
<a href="#detailpanel?item=3"> Item 3 </a>
</li>
如果是，我如何在详细信息页面中获取信息？还是我需要使用 javacript-links？
【问题讨论】：
标签： javascript url-parameters appframework
我不是 Appframework 专家，但这是我想出的最简单的解决方案：
由于您使用的是单页应用程序，因此您可以将当前选定的项目存储在全局数据结构中：
<script type="text/javascript">
var dialogData = {
"currentItemNo": -1,
// possibly other dialog data
};
</script>
然后在你的 HTML 中你可以这样设置：
<li>
<a href="#detailpanel" onclick="dialogData.currentItemNo=3">Item 3</a>
<li>
并在用户导航到页面时访问它：
<script type="text/javascript">
$("#detailpanel").bind("loadpanel", function () {
console.log("You clicked " + dialogData.currentItemNo);
});
</script>
请注意，点击处理程序和 AF 的锚点处理程序都会被调用（首先是点击处理程序）。
如果您的列表是从模板生成的，您可能希望使用更优雅的解决方案来访问当前项目编号：
<li>
<a href="#detailpanel" data-itemno="3" onclick="dialogData.currentItemNo=this.dataset.itemno">Item 3</a>
<li>
【讨论】：
在 intel appframework 论坛中回答了我的问题： https://forums.html5dev-software.intel.com/viewtopic.php?f=26&t=4478
所以解决方案是使用这样的网址：
<li>
<a href="#detailpanel/3"> Item 3 </a>
</li>
我们将处理程序附加到目标面板，从浏览器获取 url。调用回调时，框架已将 url 设置为新值：
$("#detailpanel").bind("loadpanel",function(evt){
//url would be #detailpanel/N
params = document.location.hash.split('/');
if(params.length > 1){
showDetails(params[1]);
}
else {
console.log('on_load_detailpanel: detailnr missing');
}
})
【讨论】：