Virtual List disappears after returning to home page

Questions
1

Hi,

This is my first time using Framework 7, it has been great but couldn’t figure out how to setup virtual list.

I have a virtual list in home page, when i go to page 2 and return to home page again the virtual list disappears.

<div id="app">
<div class="statusbar"></div>
<div class="view view-main">
    <div data-name="home" class="page">
        <div class="navbar">
            <div class="navbar-inner">
                <div class="left">
                    <a href="/page2/" class="link icon-only">
                        <i class="icon icon-back"></i>
                    </a>
                </div>
                <div class="title">Title</div>
                <div class="right">
                    <a href="#" class="link icon-only">
                        <i class="icon icon-back"></i>
                    </a>
                </div>
            </div>
        </div>
        <div class="toolbar tabbar toolbar-top">
            <div class="toolbar-inner">
                <a href="#tab-1" class="tab-link tab-link-active">Templates</a>
                <a href="#tab-2" class="tab-link">Favourites</a>
            </div>
        </div>
        <div class="tabs">
            <div id="tab-1" class="page-content tab tab-active">
                <div class="list virtual-list media-list"></div>
            </div>
            <div id="tab-2" class="page-content tab">
                <div class="block">
                    <p>tab 2</p>
                </div>
            </div>
        </div>
    </div>
</div>

And my js

var app = new Framework7({
root: '#app',
name: 'My App',
theme: 'md',
id: 'com.myapp.test',
panel: {
    swipe: 'left',
},
routes: [{
        path: '/',
        url: './index.html',
    },
    {
        path: '/page2/',
        url: './tpl/page2.html'
    }
]
});

var mainView = app.views.create('.view-main');

var items = [];
for (var i = 1; i <= 10000; i++) {
items.push({
    title: 'Item ' + i,
    subtitle: 'Subtitle ' + i
});
}

var virtualList = app.virtualList.create({
el: '.virtual-list',
items: items,
itemTemplate: '<li>' +
    '<a href="#" class="item-link item-content">' +
    '<div class="item-inner">' +
    '<div class="item-title-row">' +
    '<div class="item-title">{{title}}</div>' +
    '</div>' +
    '<div class="item-subtitle">{{subtitle}}</div>' +
    '</div>' +
    '</a>' +
    '</li>',
height: app.theme === 'ios' ? 63 : (app.theme === 'md' ? 73 : 46)

});
2

Because when you go away from home page, it has been removed. You need to move your VL creation logic into pageInit event for home page, something like

routes: [
  {
    path: '/',
    url: './index.html',
    on: {
      pageInit(e, page) {
        var items = [];
        for (var i = 1; i <= 10000; i++) {
          items.push({
              title: 'Item ' + i,
              subtitle: 'Subtitle ' + i
          });
        }

        var virtualList = app.virtualList.create({
          el: '.virtual-list',
          items: items,
          itemTemplate: '<li>' +
              '<a href="#" class="item-link item-content">' +
              '<div class="item-inner">' +
              '<div class="item-title-row">' +
              '<div class="item-title">{{title}}</div>' +
              '</div>' +
              '<div class="item-subtitle">{{subtitle}}</div>' +
              '</div>' +
              '</a>' +
              '</li>',
          height: app.theme === 'ios' ? 63 : (app.theme === 'md' ? 73 : 46)

        });
      }
    }
  },