[SOLVED] Steppers & VirtualList. - not working


#1

Hi lads,
Having troubles with steppers&virtuallist… i’ve rendered some steppers in a virtualList, but the steppers are not working, not increasing, not decreasing…
To make the context. My app get items from a db to make the virtuallist, and then show it on the list with steppers.
Im guessing the problem could be something related to steppers initialisation, but i couldn’t make it works.
let see the code…

itemTemplate:
      '<li>' +
       
        '<div class="item-inner">' +
          '<div class="item-title-row">' +
            '<div class="item-title">{{title}}</div>' +
          '</div>' +
          '<div class="stepper stepper-init stepper-small stepper-raised">' +
        '<div class="stepper-button-minus"></div>' +
        '<div class="stepper-value">0</div>' +
        '<div class="stepper-button-plus"></div>' +
      '</div>' + 
          '<div class="item-subtitle">{{subtitle}}</div>' +
        '</div>' +
      
      '</li>',

Will really appreciate any help… thanks!


#2

Hi,
you need to initialize the steppers after insertion in the VL

...
on: {
  itemsAfterInsert: function (vl, frag) {
    $$('.virtual-list ul .stepper').forEach(s => {
      app.stepper.create({el: s})
    })
  }
}
...

example:

jsfiddle


#3

My apologise for being late. I got some days off and lots of another things to do. I really appreciate your help Pvtallulah! you’re right! Its works, adding the “on” part. thanks!