Onsen上的导航问题。我该怎么做？(Onsen UI ons导航器实现问题)

Question

嗨，我在Onsen上面临这个问题。我该怎么做？

​

​

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

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

的目的是：在动态内容可用时填充dynamic-content (在本例中是即时的)。只要DOM中存在dynamic-content 页面，就应该在那里。

问题:当用户试图导航到同一个页面时，就会发生。当动画启动时，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导航器的Onsen教程：

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教程/示例)。

附加步骤:请更新(Onsen教程和示例)。