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?
Thanks @plpl No, {{@index}} only returns a zero for the first entry and returns nothing for the rest.
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);
}
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?
//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);
},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?
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?
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'
},
}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"}
]
*/
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}));
}
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.
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");
That’s weird. I ran your example ten times and my results point to the other being faster.
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?
it must be array
my engine gives me this
x => 9.23388671875
y => 189.177978515625
welcome to the jungle
But I literally ran your test code as you wrote it? I didn’t run it with any actual data.