Question

我有一个包含两个第1页和第2页的滑动菜单：

<body ng-controller="PageController" >
<ons-sliding-menu main-page="page1.html"
                  menu-page="menu.html"
                  side="left"
                  max-slide-distance="250px"
                  var="menu">
</ons-sliding-menu>
<ons-template id="page1.html">
    <ons-page >
        <ons-toolbar >
            <div class="left">
                <ons-toolbar-button ng-click="menu.toggleMenu()"><ons-icon icon="ion-navicon" style="font-size: 32px; width: 1em;"></ons-icon></ons-toolbar-button>
            </div>
            <div class="center lang" >Page 1</div>
        </ons-toolbar>

        <div class="template-content" >

        </div>
    </ons-page>
</ons-template>
<ons-template id="page2.html">
    <ons-page>
        <ons-toolbar>
            <div class="left">
                <ons-toolbar-button onclick="menu.toggleMenu()"><ons-icon icon="ion-navicon" style="font-size: 32px; width: 1em;"></ons-icon></ons-toolbar-button>
            </div>
            <div class="center">Page 2</div>
        </ons-toolbar>
        <div class="template-content">

        </div>
    </ons-page>
</ons-template>
<ons-template id="menu.html">
    <ons-list>
        <ons-list-item modifier="chevron" onclick="menu.setMainPage('page1.html', { closeMenu: true })">
            Page 1
        </ons-list-item>
        <ons-list-item modifier="chevron" onclick="menu.setMainPage('page2.html', { closeMenu: true })">
            Page 2
        </ons-list-item>
    </ons-list>
</ons-template>

当我通过jQuery ondereadyready事件附加动态内容时：

 $('.template-content').append('<p>Hello World</p>');

我会在第一时间看到内容，但是当我将视图更改为page2然后再次更改为page1时，我动态添加的内容将消失。我认为每次视图改变时，ui都会破坏dom。

如何防止温泉毁掉dom？这样我的动态内容就会被保留。

我找到了＆＃34;执着＆＃34;属性，但这在我的情况下不起作用。

提前谢谢！

Answer 1

每次推送页面时尝试设置内容。您可以像这样使用回调选项。

menu.setMainPage('page1.html', { closeMenu: true, 
                                callback:function(){
                                $('.template-content').append('<p>Hello World</p>');}})

Answer 2

您必须按照本指南使用Onsen Ui的导航逻辑：

http://onsen.io/reference/ons-navigator.html

您必须使用方法pushPage和导航器对象的popPage处理页面之间的堆栈导航。

方法setMainPage（）会破坏您之前创建的上一页。

onsen ui：坚持动态添加内容

2 个答案: