2

我尝试学习英特尔 Appframework UI。

我想用两个面板构建一个简单的离线应用程序。一个面板包含一个包含项目（链接）的列表，第二个面板应显示所选项目的详细信息。第二个面板中的详细信息应使用 javascript 填充。

如何将数据（例如数字 item_id）传递到第二个面板，以便我的 javascript 可以访问它并将其填充到详细信息页面中？

我可以使用列表中链接的一部分 url，如下所示：

<li>
   <a href="#detailpanel?item=3"> Item 3 </a>
</li>

如果是，我如何在详细信息页面中获取信息？还是我需要使用 javacript-links？

4

2 回答 2

4

在 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');
  }
})
于 2013-10-03T11:36:33.400 回答
1

我不是 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>
于 2013-09-30T16:39:35.457 回答