在页面外初始化列表视图

Question

我正在使用 jQuery Mobile 构建一个单页应用程序。

在标题中，我有一个“菜单”按钮，可以打开一个带有列表视图的弹出窗口。

我想定义这个弹出对话框并将其重复用于所有页面。

在页面外重用弹出窗口效果很好，但弹出窗口内的列表视图没有得到增强（因为列表视图内部使用父页面来解析列表中包含的链接）。

问题：是否可以在页面之外使用列表视图小部件？ （我知道我可能必须指定一个基本 url 才能工作，但我不认为这会是一个问题）。

Answer 1

不，不可能。当您创建一个不驻留在单个页面中的动态弹出窗口时，它会起作用，因为弹出窗口从未打算使用/页面。但是，另一方面，listview 要求列表位于父页面中。 listview 的refresh 方法期望它在父级中。查看列表视图刷新时调用的这个函数：

_createSubPages: function () {
    var parentList = this.element,
        parentPage = parentList.closest(".ui-page"), //<-- This line
        parentUrl = parentPage.jqmData("url"), 
        parentId = parentUrl || parentPage[0][$.expando],
        parentListId = parentList.attr("id"),
        o = this.options,
        dns = "data-" + $.mobile.ns,
        self = this,
        persistentFooterID = parentPage.find(":jqmData(role='footer')").jqmData("id"),
        hasSubPages;

      // blah blee blah

    }).listview();

参见函数的第二行。它希望有一个页面。兄弟运气不好:)

PS：这是我能得到的最接近的：http://jsfiddle.net/hungerpain/8qq62/1/

编辑

这是一个 hacky 方法。您可以在data-role=page div 中动态创建一个隐藏 <span/> 并在其中添加<ul/>。然后你可以刷新它，然后你可以将它移动到动态弹出窗口。然后你必须删除隐藏的 span 元素。这是代码：

$.extend({
    "makePopup": function (array) { //you could add more if you want here, such as callbacks to the click function of the button,etc.
        var $popup;
        //creat popup element
        $popup = $("<div/>", {
            "data-role": "popup",
                "data-theme": "a",
                "data-overlay-theme": "a",
                "data-transition": "pop"
        }).popup();

        //create list
        $list = $("<ul/>", {
            "data-role": "listview",
                "id": "templist"
        }).html(function () {
            var li = [];
            for (var i = 0; i < array.length; i++) {
                li.push($("<li/>").html(array[i]));
            }
            return li;
        })

        //create close element
        var $close = $("<a/>", {
            "data-role": "button",
                "html": "Close",
                "href": "#",
                "data-theme": "a"
        }).on("click", function () {
            //click event of close element
            $(this).closest("[data-role=popup]").popup("close");
        }).buttonMarkup();

        //add a span to page, refresh list, etc
        $.mobile.activePage.append("<span id='temp'></span>").find("#temp").hide().append($list).promise().done(function () {
            $(this).find("#templist").listview().listview("refresh");
        });

        //create content div - makes a nice jQM page structure.
        var $content = $("<div/>", {
            "data-role": "content",
            //move li to popup
        }).append($("#temp").find("#templist"), $close);
        //remove span
        $("#temp").remove();
        //append $close to $content, then append $content to $popup
        $content.appendTo($popup) 
        return $popup;
    }

});

你可以将一个数组传递给这个：

 $.makePopup(["Sweet Child 'O Mine", "Summer of '69", "Smoke in the Water", "Enter Sandman", "I thought I've seen everything"]).popup("open");

这是一个更新的演示：http://jsfiddle.net/hungerpain/8qq62/7/

但显然这是 hacky。