Will virtual lists work in the index.html or only pages loaded from a template? f7v2.0

Tutorials
1

Will virtual lists work in the index.html or only pages loaded from a template?

I have copied the example from the virtual-list.html and place it in my index.html so the list will populate on pageInit, however when the app first starts I get the error : [Error] TypeError: undefined is not an object (evaluating ‘self.$app.virtualList’). I also tried app.virtualList and found that it is not an object ether, but just using app is an object .

index.html

        <div class="page-content">
          <div class="list virtual-list media-list searchbar-found"></div>
       </div>

app.js

   routes: routes,
  on: {
    pageInit: function() {
      console.log('page initiated');
      var self = this;
      self.virtualList = self.$app.virtualList.create({
        // List Element
        el: self.$el.find('.virtual-list'),
        // List item Template7 template
        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>',
        // Item height
        height: self.$theme.ios ? 63 : 73,
      });
    },
  }, 
...
2

This API is for component page! Won’t work like that:

self.virtualList = self.$app.virtualList.create({...

->

var virtualList = app.virtualList.create({...
3

Thanks for the help, I still got the error though, so i swap out app for this then it passed, and now a new problem.

TypeError: undefined is not an object (evaluating 'items.length')

do i also need?

  // Pass array with items
          items: self.items,

My code now is…

pageInit: function(init) {
  var virtualList = this.virtualList.create({
    // List Element
    el: document.querySelector('.virtual-list'),
    // List item Template7 template
    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>',
    // Item height
    height: theme.ios ? 63 : 73,
  });

}
4

Where do you write this event handler? In main app parameters?

5

In the app.js file

routes: routes,
  on: {
    pageInit: function() {...
6

OK error goes away with …

// Pass array with items
        items: this.data,

But nothing is written to the DOM ??

7

Working! For anyone that needs a virtual list in the index.html here is the working code.

index.html

<div class="list virtual-list media-list searchbar-found"></div>

app.js

var app = new Framework7({
  root: '#app',
  theme: theme,
  data: function() {
    var items = [];
    for (var i = 1; i <= 10000; i++) {
      items.push({
        title: 'Item ' + i,
        subtitle: 'Subtitle ' + i
      });
      console.log('1');
    }
    return {
      items:items
    };
  },
  routes: routes,
  on: {
    pageInit: function() {
      var virtualList = this.virtualList.create({
        // List Element
        el: document.querySelector('.virtual-list'),
        // Pass array with items
        items: this.data.items,
        // List item Template7 template
        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>',
        // Item height
        height: theme.ios ? 63 : 73,
      });
    },
  },
});
8

Try this:

pageInit: function(page) {
  var app = this;
  var virtualList = app.virtualList.create({
    // List Element
    el: page.$el.find('.virtual-list'),
    // Pass array with items
    items: app.data.items,
    // List item Template7 template
    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>',
    // Item height
    height: app.theme === 'ios' ? 63 : 73,
  });
},
1 Like
9

Yep, that work as well – Thanks!