2011-05-24 53 views
3

我有一個帶有兩個「頁面」的jquery移動應用程序。第一頁是Google地圖,第二頁是建築物的列表視圖,其中每個列表項都有一個與其關聯的標識。當用戶點擊建築物時,地圖就是爲了平移到該建築物並顯示一個標記。然而,jquery mobile的一個怪癖是我必須在之後調用google.maps.event.trigger(map, 'resize')map.panTo(somePosition)發生頁面轉換,否則地圖會顯示出怪異。我正在使用jQuery Mobile pageshow事件來執行此操作。我的問題是,pageshow事件處理程序參數中是否有任何東西,或者有什麼方法將某些事物附加到pageshow事件處理程序參數中,這些參數將允許我確定導致頁面轉換首先被點擊的列表項的id ,所以我可以用它來確定在哪裏平移地圖?jQuery Mobile獲取頁面轉換後導致頁面轉換的已點擊項目的id

此刻,我不得不圍繞某種方式做到這一點,在那裏我點擊所選列表項的單擊事件,將選定的列表項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事件處理程序仍然會執行,但如果用戶以前沒有選擇建築物,則選定的建築物不存在,或者如果選擇的建築物已選擇,將導致地圖移動到最後的以前的建築,這實際上並不是預期的行爲。我確信我可以爲這兩個事件處理程序提供一些額外的全局變量來編碼,但這會有點混亂。理想情況下,我正在尋找的是一種方法,只需綁定到pageshow事件,並從綁定的函數內能夠派生出哪個建築物ID被點擊。

我對jQuery和JavaScript一般還是比較新的,所以請記住這一點。儘管我在Chrome中使用了javascript調試工具,但我仍然不確定如何有效地找到ui參數pageshow事件處理程序中提供的信息,我想對於解決這樣的問題將是一個好的開始。

回答

1

你可以堅持buildingSelect的點擊處理程序中的pageshow事件處理程序,並用它使您可以通過事件粘合劑傳遞數據的語法:從http://api.jquery.com/live/.live(eventType, eventData, handler)

但是之後你必須在die其他生活pageshow處理程序之前這樣做。如果是我,我只是要清理你存儲這些全局變量的方式,並稱之爲一天。也許把它們放在一個位於名稱空間的好對象中,這樣更安全。

編輯:改我的不正確的口語「銷燬」到正確的die。所以,你會想死的事件處理程序中$('div').die()或任何其他變化的文件中解釋說:http://api.jquery.com/die/

+0

你能否詳細說明了如何福利局/爲什麼我需要摧毀「其他」活pageshow處理程序? – 2011-05-25 00:51:44

+1

對不起,我有時會說愚蠢的事情。這就是所謂的死不滅,我編輯。 – Milimetric 2011-05-25 00:56:32

+0

我已經接受了這個的答案,而不是我自己的,因爲你已經做了所有的跑腿。 – 2011-05-25 04:12:17

0

從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 ing),它將消除掛起並聽取不相關pageshow事件的問題,例如火災當用戶按下「後退」按鈕和hasn時根本沒有選擇一座建築。我相信可以通過以下Milimetric的建議,使用.live(eventType, eventData, handler)實際上通過選定的建築傳遞給rejigMap,這將允許全局變量完全消除被重構多一點。