如何在使用 <ons-navigator> 的同时保持状态的同时在页面之间导航？答案

【问题标题】：How does one navigate between pages while maintaining state whilst using <ons-navigator>?如何在使用 <ons-navigator> 的同时保持状态的同时在页面之间导航？
【发布时间】：2015-03-20 19:05:33
【问题描述】：

我有 3 个主要页面：列表（企业）、搜索和收藏夹。从列表页面，用户可以深入了解有关业务的详细信息。

我正在使用。由于我使用的是，因此从列表导航到详细信息并返回列表按预期工作。由于 Onsen-UI 正在执行 popPage()，因此会维护列表页面状态。

我的问题是如何在保持列表状态的同时从收藏夹或搜索导航回列表？现在我正在使用 pushPage() 但这会不断将页面添加到堆栈中。我不认为它应该是这样工作的，实际上如果你将一个页面推送到页面堆栈并且它已经存在......它不应该被添加，而应该被移动到顶部。只是一个想法。

我的代码：

<ons-navigator var="app.navi" page="list.html"></ons-navigator>

<ons-template id="list.html">
    <ons-page id="list-page">
        <ons-toolbar>
            <div class="center">Near Me</div>
        </ons-toolbar>
        <ons-list></ons-list>
    </ons-page>
</ons-template>

<ons-template id="search.html">
    <ons-page id="search-page">        
        <ons-toolbar>
            <div class="center">Search</div>
        </ons-toolbar>
    </ons-page>
</ons-template>

<ons-template id="favourites.html">
    <ons-page id="favourites-page">
        <ons-toolbar>
            <div class="center">Favourites</div>
        </ons-toolbar>
    </ons-page>
</ons-template>

<ons-template id="detail.html">
    <ons-page id="detail-page">            
        <ons-toolbar>
            <div class="left">
                <ons-back-button>Back</ons-back-button>
            </div>
        </ons-toolbar>
        <ons-list></ons-list>
    </ons-page>
</ons-template>

<ons-template id="sub-detail-page.html">
    <ons-page id="sub-detail-page">
        <ons-toolbar>
            <div class="left"><ons-back-button>Back</ons-back-button></div>
            <div class="center">Sub Detail Page</div>
        </ons-toolbar>
    </ons-page>
</ons-template>

$( $lstElmnt.children('.item'), this ).on( 'click', function() {
    currentItem = getEstablishment( $( this ).attr( 'id' ), app.navi.pushPage( 'detail.html' ) );          
});

我尝试过的其他东西包括轮播、标签栏和普通的旧 JQuery。

【问题讨论】：

<ons-tab> 组件有一个persistent 属性。通过使用切换选项卡时页面不会被破坏。
@AndreasArgelius 感谢您在标签栏上建议配置。然而，这在我的情况下不起作用，因为我需要导航到选项卡中的子页面 - 我知道这是不可能的......

标签： onsen-ui

【解决方案1】：

查看我的gist，了解如何使用RouterNavigator 进行反应

【讨论】：