2015-04-04 2 views
0

У меня есть раздвижное меню с двумя элементами 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, содержимое, которое я динамически добавил, исчезло. Я думаю, что каждый раз, когда вид меняется, онсен уничтожит дом.

Как я могу предотвратить onsen ui, чтобы уничтожить дом? Чтобы мой динамический контент был сохранен.

Я нашел «постоянный» атрибут, но это не работает в моем случае.

Спасибо заранее!

+0

Когда вы используете 'setMainPage()', старая страница уничтожается, чтобы загрузить новую, поэтому, когда вы вернетесь на старую страницу, все будет создано снова. Например, вам нужно будет сохранить содержимое вашей страницы, используя что-то вроде Local Storage, и создайте страницы, загружающие контент. –

ответ

0

Попробуйте установить контент каждый раз, когда вы нажимаете страницу. Вы можете использовать функцию обратного вызова, как это.

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

Вы должны использовать навигационную логику онсэн Ui после этого руководства:

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

Вы должны обрабатывать стек навигации между страницами с использованием методов pushPage и popPage объекта навигатора.

Метод setMainPage() уничтожает предыдущую страницу, которую вы создали ранее.

Смежные вопросы