I have tried to create a page in which list is populated using virtual list using data received from server as ajax response.Based on click event in each item i need to perform certain operations as per method in it. But its now working. For easyness I have drafted sample code here.
`<template>
<div class="page" data-name="app-list">
<div class="navbar">
<div class="navbar-inner sliding">
<div class="left">
<a href="#" class="link back">
<i class="icon icon-back"></i>
<span class="ios-only">Back</span>
</a>
</div>
<div class="title">Test</div>
</div>
</div>
<div class="page-content">
<div class="list simple-list no-hairlines virtual-list" id='ldevicelist'>
<ul>
<li>Loading...</li>
</ul>
</div>
</div>
</div>
`
Script is given below
method:{ testList:function(id){ console.log(‘test’+id); } },
on: {
pageBeforeIn: function(e, page) {
var self=this;
var $ = self.$;
app.request.post(baseurl,{id:this.$route.params.id}, function (data) {
data=JSON.parse(data);
var virtualList = app.virtualList.create({
el: ‘.virtual-list’,
items: data.devices,
itemTemplate: ‘<a @click=test({{id}}) class=“item-link item-content”>’+
‘
‘’,
', // Item height // height: app.theme === ‘ios’ ? 63 : 73, }); }) return false; }, } }