0

我使用 jQuery mobile 在 Asp.net mvc 中创建嵌套列表视图，它有 2 个子视图，当我导航到第一个 subview1 时，我可以返回主视图，但是当我从 subview1 导航到 subview2 时，我无法返回 subview1，因为subview1 以某种方式为空。

在我的布局页面中，我把这个脚本

 <script>
    $(document).on('mobileinit', function () {
        $.mobile.page.prototype.options.addBackBtn = true;
        $.mobile.page.prototype.options.backBtnText = "Back";
        $.mobile.page.prototype.options.backBtnTheme = "a";
        $.mobile.defaultPageTransition = "slide";

    });
</script>

主页是：

<script>

$(document).on('click', '[data-rel=back]', function (e) {
    e.preventDefault();
    var activepage = $.mobile.activePage.attr("id");

    if (activepage == "schedule")
        $.mobile.changePage($('#flight'), { transition: "slide", reverse: false });

    if (activepage == "dayFlight") {
        $.mobile.changePage($('#schedule'), { transition: "slide", reverse: false });
    }
});


<div data-role="page" id="flight" data-add-back-btn="true">
<div data-role="content">
    <ul id="flightListView" data-role="listview" data-inset="false" data-filter="true">
        @foreach (var item in Model)
        {
            <li>
                <a href="@Url.Action("Schedules", new { from = item.DepartureFrom, to = item.Destination })" data-direction="reverse" data-transition="slide">
                    <span class="ui-li-count ui-btn-up-c ui-btn-corner-all">@item.NumberOfFlights</span>
                </a>
            </li>
        }
    </ul>
</div>

subview1 是：

<div data-role="page" data-add-back-btn="true" id="schedule">
<div data-role="content">
    <ul id="scheduleListView" data-role="listview" data-inset="false" data-filter="false">
        @foreach (var item in Model)
        {
            <li>
                <a href="@Url.Action("DayFlights", new { from = from, to = to, date = item.Date })" data-direction="reverse" data-transition="slide">
                    <span class="lg">@Html.DisplayFor(modelItem => item.Day)</span>
                    <span class="lg number laligned">@Html.DisplayFor(modelItem => item.Date)</span>
                    <span class="ui-li-count ui-btn-up-c ui-btn-corner-all">@item.Nof</span>
                </a>
            </li>
        }
    </ul>
</div>

subview2 是：

<div data-role="page" data-add-back-btn="true" id="dayFlight">
<div data-role="content">
    <ul id="dayListView" data-role="listview" data-inset="true" data-filter="false">
        @foreach (var item in Model)
        {
            <li>
                <a href="@item.AgencyUrl" rel="external" data-ajax="false">
                    <span class="ui-li-count ui-btn-up-c ui-btn-corner-all">@item.Cap</span>
                </a>
            </li>
        }
    </ul>
</div>

我想出来的是，当我导航到 subview1 时，主视图和 subview1 都在 DOM 中，但是当我导航到 subview2 时，subview1 将被 subview2 替换，所以这意味着当我在 subview2 时 subview1 确实DOM 中不存在。

在所有情况下 $.mobile.activePage.prev('.ui-page'); return null，这就是为什么我决定使用 if 子句来确定我应该导航回哪个页面的原因，但是当我想从 subview2 导航回 subview1 时它不起作用。

我该如何实现这个场景？

提前致谢

4

0 回答 0