Accessing the index of the item in a virtualList itemTemplate


#1

This is probably super simple but I’m not very familiar with handlebar syntax and I’m still learning Framework7…

I would like to be able to access the index of each item that is being output from the items array into the itemTemplate. Something like:

itemTemplate:
  '<li>' +
    '<p>''{{index}}' </p>+
    '<p>''{{title}}' </p>+
  '</li>' +

Is it possible to get access to this index?


#2

try

{{@index}}

http://idangero.us/template7


#3

Thanks @plpl No, {{@index}} only returns a zero for the first entry and returns nothing for the rest.


#4

i see
you are using “renderItem”

try this:

renderItem:function(item,index){
  var obj=app.utils.extend(item,{index:index});
  var tmpl='<li>\
              <p>{{index}}</p>\
              <p>{{title}}</p>\
            </li>';
  return Template7.compile(tmpl)(obj);
}

#5

I’m not using renderItem for this… I am just using itemTemplate which is a string containing HTML tags with handlebar variable references. Should I use renderItem for this instead?


#6

ok
my mistake i thought it is autocomplete

i will see for a solution


#7
//itemTemplate => remove it
renderItem:function(item){
  var obj=app.utils.extend(item,{index:this.items.indexOf(item)});
  var tmpl='<li>\
              <p>{{index}}</p>\
              <p>{{title}}</p>\
            </li>';
  return Template7.compile(tmpl)(obj);
},

#8

Great! This is getting somewhere!
Now to extend my question, is there a way that items can be an object with keys rather than a basic array? If so, how would this new renderItem function have to look?


#9

no
it should be array of obj

[{},{}]

you wiil need to convert your obj to aoo


#10

Cool. I just thought I’d ask because my original data is in object form and I have been using Object.values( itemsObject ) to convert it for the virtualList display, but I’m worried this isn’t supported on android as it seems to be breaking. Is there a better way to do this?


#11

post your obj (not all of it)


#12

This a very reduced example of what I’m working with:

var itemsObject = {  
    ABD:{
       title: 'Example Title 1',
       city: 'Abingdon',
       address: 'Eaxmple Address 1'
    },
    ASB:{
       title: 'Example Title 2',
       city: 'Aldershot',
       address: 'Eaxmple Address 2'
    },
    AGT:{
       title: 'Example Title 3',
       city: 'Aldgate',
       address: 'Eaxmple Address 3'
    },
}

#13
var obj={  
  ABD:{
    title: 'Example Title 1',
    city: 'Abingdon',
    address: 'Eaxmple Address 1'
  },
  ASB:{
    title: 'Example Title 2',
    city: 'Aldershot',
    address: 'Eaxmple Address 2'
  },
  AGT:{
    title: 'Example Title 3',
    city: 'Aldgate',
    address: 'Eaxmple Address 3'
  }
};
var items=[];
for(var k in obj){
  items.push(app.utils.extend({key:k},obj[k]));
}
console.log(items)
/* output
[
  {"key":"ABD","title":"Example Title 1","city":"Abingdon","address":"Eaxmple Address 1"},
  {"key":"ASB","title":"Example Title 2","city":"Aldershot","address":"Eaxmple Address 2"},
  {"key":"AGT","title":"Example Title 3","city":"Aldgate","address":"Eaxmple Address 3"}
]
*/

#14

if you wand to add the {{index}}
you can do it also here

var items=[];
for(var k in obj){
  items.push(app.utils.extend({key:k},obj[k],{index:items.length}));
}

#15

Thanks for this. Is this more efficient than Object.values()? And do you think my use of this is causing my problems in Android? I read it may not be supported.


#16
Object.values()

seems faster (way faster)

cant say about android(s) support

var obj={};
for(var i=0;i<1000000;i++){
  obj[i]=i;
}
console.time("x");
var arr1=Object.values(obj)
console.timeEnd("x")
console.time("y");
var arr2=[];
for(var k in obj){
  arr2.push(obj[k]);
}
console.timeEnd("y");

#17

That’s weird. I ran your example ten times and my results point to the other being faster.

  • x: 574.723ms / y: 404.666ms
  • x: 501.143ms / y: 309.576ms
  • x: 511.628ms / y: 323.977ms
  • x: 484.237ms / y: 321.076ms
  • x: 486.238ms / y: 326.444ms
  • x: 504.114ms / y: 366.733ms
  • x: 509.089ms / y: 343.915ms
  • x: 475.865ms / y: 347.020ms
  • x: 492.772ms / y: 320.431ms
  • x: 488.557ms / y: 334.067ms

Either way, the best thing would be to not have to convert the object to an array for the virtualList or autoComplete. I guess that’s just not an option right?


#18

it must be array

my engine gives me this

x =>   9.23388671875
y => 189.177978515625

welcome to the jungle


#19

But I literally ran your test code as you wrote it? I didn’t run it with any actual data.


#20

it depends in your engine
(almost) every machine/engine will will do it differently