Onsen UI 的导航问题。我该如何解决？（Onsen UI ons-navigator 实现问题）

Question

嗨，我在 Onsen UI 遇到了这个问题。我该如何解决？

简介： 下面的代码创建了一个显示 start 页面的 Onsen 应用程序界面。在 start 页面上有两件事 (1) 是 dynamic-content 和 (2) 是 navigation button.

当 start 页面加载时，pageinit 事件触发并且 feed/populate dynamic-content 到起始页。 navigation button 每次导航到 start 页面。

目的是： 在动态内容可用时填充 dynamic-content （对于此示例，它是即时的） . dynamic-content 应该存在 只要 start 页面存在于 DOM.

问题： 当用户尝试导航到同一页面时发生。动画开始时，pageinit 会触发 start 页面的 。 但是动态内容不见了。

也许...当导航器尝试为页面设置动画时，它复制了 start 页面并且没有动态内容

How should I work around?

感谢您的帮助。 ('',)V

<ons-sliding-menu
    var="appMenu"
    menu-page="menu.html"
    main-page="navigator.html"
    swipeable="true"
    swipe-target-width="100px"
    side="left"
    type="overlay"
    max-slide-distance="220px">

    <div id="toast">
        <div class="fly-wrapper">
            <div class="fly-card z-depth-5" style="display:none;">
                <div class="message"></div>
            </div>
        </div>
    </div>

</ons-sliding-menu>

<script>
    document.addEventListener("pageinit", function(e) {
      if (e.target.id == "start") {
        document.getElementById('dynamic-content').textContent = 'The start page was here';
      }
    }, false);
</script>

<ons-template id="navigator.html" style="display:none;">
    <ons-navigator var="appNav" page="start.html"></ons-navigator>
</ons-template>

<ons-template id="start.html" style="display:none;">
    <ons-page id="start" class="start">
        <div id="dynamic-content"></div>
        <a class="button" ng-click="appNav.pushPage('start.html',{animation:'simpleslide'})">
            Load start again
        </a>
    </ons-page>
</ons-template>

<ons-template id="navigator.html" style="display:none;">
    <ons-page></ons-page>
</ons-template>

关于ons-navigator的温泉教程：

Answer 1

现在我使用以下工作代码：

<a class="trigger-pageload" app-href="start.html">Load start page</a>

$(document)
.on('tap','.trigger-pageload',function(){
    var href = $(this).attr('app-href');
    if(appNav.getCurrentPage().name!=href) appNav.replacePage(href);
});

解决方案： 2个关键步骤如下

防止同一页面转换。
使用replacePage代替pushPage（不要泡温泉tutorial/example）。

Additional step: Please update (Onsen tutorial and example).

Onsen UI 的导航问题。我该如何解决？（Onsen UI ons-navigator 实现问题）

Navigation issue on Onsen UI. How do I work around? (Onsen UI ons-navigator implementation issue)

javascript

jquery

onsen-ui

Onsen UI 的导航问题。我该如何解决？ （Onsen UI ons-navigator 实现问题）

Navigation issue on Onsen UI. How do I work around? (Onsen UI ons-navigator implementation issue)

javascript

jquery

onsen-ui

Onsen UI 的导航问题。我该如何解决？（Onsen UI ons-navigator 实现问题）