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

Question

您好，我在Onsen UI上遇到此问题。我该如何解决？

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

当start页面加载时，pageinit事件触发并将dynamic-content提供/填充到起始页面。 navigation button每次都会导航到start页面。

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

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

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

  

我该如何解决？

感谢您的帮助。 （＆＃39;＆＃39;，）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);
});

<强> SOLLUTION： 2个关键步骤如下

1. 阻止同一页面转换。
2. 使用replacePage代替pushPage（不要按照onsen教程/示例）。

  

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