如何正确克隆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？

回答

相关问题