Question

我有一个带有两个“页面”的jquery移动应用程序。第一页是Google地图，第二页是建筑物的列表视图，其中每个列表项都有一个与之关联的ID。当用户单击建筑物时，地图将平移到该建筑物并显示标记。然而，jquery mobile的一个怪癖是我必须在页面转换发生后调用google.maps.event.trigger(map, 'resize')和map.panTo(somePosition) ，否则地图会显示出时髦。我正在利用jQuery Mobile pageshow事件来执行此操作。我的问题是，pageshow事件处理程序参数中是否有任何内容或任何方式将某些内容附加到pageshow事件处理程序参数，这将允许我识别被单击的列表项的id首先导致页面转换，所以我可以用它来确定将地图平移到哪里？

目前，我不得不在一种方式中进行，我点击所选列表项的click事件，将所选列表项id存储在全局变量中，然后使用全局变量稍后在pageshow事件处理程序中的变量。

类似于：

var selectedBuilding; $('a.buildingSelect').click(function(e) { e.preventDefault(); selectedBuilding = $(this).attr("data-buildingNum"); }); $('div').live('pageshow',function(event, ui){ if (ui.prevPage.attr('id') === "buildingSelect") { google.maps.event.trigger(map, 'resize'); map.panTo(selectedBuilding); } });

除了有点凌乱之外，其中一个问题是用户根本没有选择建筑物编号，例如当他们按下建筑物列表页面上的“后退”按钮时。在这种情况下，pageshow事件处理程序仍然会被执行，但如果用户之前没有选择过某个建筑物，则所选建筑物将不存在，或者会导致地图平移到 last < / em>选择建筑物，如果他们之前选择了建筑物，这实际上不是预期的行为。我确信我可以为这两个事件处理程序提供一些额外的全局变量来编写代码，但它会有点混乱。理想情况下，我正在寻找的只是必须绑定到pageshow事件的方法，并且在绑定函数中能够导出点击了哪个建筑物ID。

我对jQuery和javascript一般都比较新，所以请记住这一点。虽然我在Chrome中使用了javascript调试工具，但我仍然不确定如何有效地找到ui参数中pageshow提供的信息。事件处理程序，我认为这将是解决此类问题的良好开端。

Answer 1

您可以将pageshow事件处理程序粘贴到buildingSelect的点击处理程序中，并使用允许您通过事件绑定器传递数据的语法：.live( eventType, eventData, handler )来自http://api.jquery.com/live/

但是在执行此操作之前，您必须die其他实时pageshow处理程序。如果是我，我只是清理你存储这些全局变量的方式并称之为一天。也许把它们放在一个位于命名空间之外的漂亮物体中，这样它就更安全了。

编辑：将错误的口语“销毁”更改为正确的die。因此，您希望在$('div').die()或文档中说明的任何其他变体中处理事件处理程序：http://api.jquery.com/die/

Answer 2

根据Milimetric的回答，这是我基本上做的：

var selectedBuilding;

function rejigMap(event ui) {
    google.maps.event.trigger(map, 'resize');
    map.panTo(selectedBuilding);
    $('div').die('pageshow', rejigMap);
}

$('a.buildingSelect').click(function(e) {
    e.preventDefault();
    selectedBuilding = $(this).attr("data-buildingNum");
    $('div').live('pageshow', rejigMap);
});

通过在选择建筑物时仅创建live页面显示侦听器，然后在我执行了我需要的代码后立即销毁它（die），它消除了{的问题{1}}闲逛并聆听无关的rejigMap事件，例如当用户按下“后退”按钮并且根本没有选择建筑物时会触发。我相信这可以通过遵循Milimetric建议使用pageshow实际将选定的建筑物传递到.live(eventType, eventData, handler)来进行更多重构，这将允许全局变量被消除完全。

在页面转换发生后，jQuery Mobile获取导致页面转换的单击项目的ID

2 个答案: