温泉用户界面上的导航问题。 我该如何解决？ （Onsen UI ons-navigator实施问题）

Question

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

简介：以下代码创建一个Onsen应用程序界面，该界面显示一个start页面。 在start页面上有两件事（1）是dynamic-content ，（2）是navigation button 。

当start页面加载， pageinit事件触发器和饲料/填充dynamic-content的开始页面。 navigation button每次都导航到start页面。

目的是：在动态内容可用时填充dynamic-content （在本示例中为即时） 。 该dynamic-content 应该存在 ，只要在start页面中的DOM存在。

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

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

我应该如何解决？

感谢您的帮助。 （''，）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的温泉教程：

1. http://onsen.io/guide/overview.html#Pageinitevent
2. http://codepen.io/onsen/pen/IDvFJ

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个关键步骤如下

1. 防止相同的页面过渡。
2. 请使用replacePage而不是pushPage （不要遵循温泉教程/示例）。

附加步骤：请更新（Onsen教程和示例）。