@click event in virtual list not working


#1

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”>’+

  • {{deviceid}}
  • ’+
    ‘’,
    ', // Item height // height: app.theme === ‘ios’ ? 63 : 73, }); }) return false; }, } }

    [SOLVED] Add @click event to <div> tag in list and pass html5 data
    #2

    No, it won’t work as that template in VL is not parsed by router. You need to assign such clicks manually. Check here [v2] [SOLVED] virtualList and data- attributes changes


    #3

    Thanks buddy… You made my day… :grinning: