Onsen ui onsen ui：动态保存添加的内容_Onsen Ui

Onsen ui onsen ui：动态保存添加的内容

Onsen ui onsen ui：动态保存添加的内容,onsen-ui,Onsen Ui,我有一个滑动菜单，有两个项目page1和page2： <body ng-controller="PageController" > <ons-sliding-menu main-page="page1.html" menu-page="menu.html" side="left" max-slide-distance="250px" v

我有一个滑动菜单，有两个项目page1和page2：

<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 ondeviceready事件附加动态内容时：

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

我将在第一次看到内容，但当我将视图更改为第2页，然后再次更改为第1页时，我动态添加的内容将消失。我认为每次在用户界面上更改视图都会破坏dom

如何防止onsen ui破坏dom？这样，我的动态内容将被持久化

我找到了persistent属性，但这在我的情况下不起作用

提前谢谢你

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

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

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

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

方法setMainPage会销毁以前创建的页面。

使用setMainPage时，旧页面会被销毁以加载新页面，因此当您返回到旧页面时，所有内容都会再次创建。例如，您需要使用诸如本地存储之类的方法存储页面内容，并从那里加载内容来创建页面。