Question

我有一个以JQM listview为主要内容的页面。然后导航到另一个页面，需要使用相同的列表视图作为侧边栏。我的第一个想法是使用clone（）将列表正确克隆到另一页上。

如果已加载第一页（~~示例已删除~~），则此方法非常有效。但是，如果用户直接导航到第二页（~~示例已删除~~），则在克隆列表时，JQM尚未将其初始化为列表视图，因此无法正确显示。我无法弄清楚如何正确地初始化/克隆。

有问题的网站是~~示例已删除~~。

如果我的问题不明确，请告诉我，我会尝试清理一下。

Answer 1

初始化刷新的诀窍很难弄清楚，但基本上我要做的是try来刷新我克隆的列表，如果这个失败（抛出异常），那么初始化克隆名单。如果它成功刷新，那么它已经初始化，我不需要初始化克隆。

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

Answer 2

您可以声明一个构建菜单的函数，将其包含在您网站的每个页面上（如果您还没有全局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是唯一的。

如何正确克隆JQM列表视图？

2 个答案: