如何正確克隆JQM listview？

我有一個以JQM listview作爲主要內容的頁面。然後導航到另一個頁面，需要使用相同的列表視圖作爲側欄。我的第一個想法是使用clone（）將列表正確地克隆到其他頁面上。如何正確克隆JQM listview？

如果第一頁（~~示例已移除~~）已被加載，則此方法非常有效。但是，如果用戶直接導航到第二頁（~~示例已刪除~~），則當它克隆列表時，JQM未將其初始化爲列表視圖，因此它無法正確顯示。我無法弄清楚如何得到這個初始化/克隆正確。

有問題的網站是~~示例已刪除~~。

如果我的問題不清楚，讓我知道，我會盡量清除它。

2012-03-29 xdumaine

調用頁面上的'.trigger（'create'）'來初始化它的所有子元素。你也可以直接選擇ul，如果它沒有被初始化，則調用'.listview（）'，如果它已經被初始化，則調用'.listview（'refresh'）'。 – 2012-03-29 18:22:05

@KevinB我實際上一直在嘗試所有這些都沒有成功。我會再試一次，並更新我所嘗試過的。 – xdumaine 2012-03-29 19:03:35

初始化刷新的技巧很難找出，但基本上我需要做的是刷新我克隆的列表，並且如果失敗（拋出異常），則初始化克隆列表。如果它成功刷新，那麼它已經被初始化，我不需要初始化克隆。

try { 
    // try to refresh the parent, if it works, we don't need to do anything 
    $('#To-Clone').listview('refresh'); 
} catch (e) { 
    // if refreshing the parent fails, then it wasn't initialized, and we need to initialize the child 
    $('#Clone').listview(); 
}

來源

2012-03-29 19:23:15 xdumaine

這解決了我的問題，但我不確定它是否是正確的方法，所以我將它打開。 – xdumaine 2012-03-29 19:23:53

可以宣佈建立菜單的功能，包括它放在網站的每一頁上（如果你還沒有一個全球性的JS包含文件），然後調用它來建立你的菜單在必要時：

function build_menu($container) { 
    var out = '<ul data-role="listview">...</ul>'; 

    $container.append(out).trigger('create'); 
} 
$(document).delegate('#my-page-id', 'pageinit', function() { 
    build_menu($(this).children('.ui-page')); 
});

否則，您可以檢查小部件是否具有在初始化過程中應用的.ui-listview類。

//cache the clone 
var $clone = $('#my-element').clone(); 

//check if the clone has the initialized class 
if ($clone.hasClass('ui-listview')) { 

    //since this listview has already been initialized, refresh it 
    $('#my-container').append($clone).children().last().listview('refresh'); 
} else { 

    //initialize this listview clone 
    $('#my-container').append($clone).children().last().listview(); 
}

你要確保你的listview部件沒有一個ID或者你將要追加到DOM所以你的ID是唯一的前更改克隆的ID。

來源

2012-03-29 19:17:50 Jasper

如何正確克隆JQM listview？

回答

相關問題