Intel appframework ui:如何在一个简单的列表-细节应用程序中传递数据

Question

我试着学习Intel应用框架UI。

我想建立一个简单的离线应用程序，只有两个面板。一个面板包含一个包含项目(链接)的列表，第二个面板应该显示所选项目的详细信息。第二个面板中的细节应该用javascript填充。

如何将数据(例如数字item_id)传递给第二个面板，以便javascript能够访问它并将其填充到details页面中？

我是否可以使用列表中链接的url的一部分，如：

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

如果是，如何将信息返回详细信息页？还是我需要使用javacript链接？

Answer 1

在英特尔应用框架论坛上回答了我的问题：https://forums.html5dev-software.intel.com/viewtopic.php?f=26&t=4478

因此，解决方案是使用这样的urls：

<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');
  }
})

Answer 2

我不是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>

请注意，click处理程序和AF的锚处理程序都会被调用(首先是单击处理程序)。

如果您的列表是从模板生成的，您可能希望使用更优雅的解决方案来访问当前的项目号：

<li>
  <a href="#detailpanel" data-itemno="3" onclick="dialogData.currentItemNo=this.dataset.itemno">Item 3</a>
<li>