How to set stepper values when page loads

Questions
1

Hi,

I have a VL with 500+ items with createUI set to false and using divs. My problem is that after I add item with clicking stepper (+) and navigate Back one page and load products page again stepper value are not populating again. Ideally all products which had a stepper value should keep its state. How can I achieve that?

Below is my code in pageBeforeIn

pageBeforeIn: function(e, page) {
	console.log('addproeucts pageBeforeIn', page);
	var count = 1;
	app.data.myorder.products.forEach(function(item) {
		console.log(count+' - #item-'+item.id, item.qty);
		app.stepper.setValue($('#item-'+item.id).find('.stepper'), item.qty);
		$('#item-'+item.id).addClass('item-added');
		count++;
	});
},

I can only see first 48 items with stepper and everything after first 48 items gets reset to 0.

VL code:

el: self.$el.find('.virtual-list'),
cols: 3,
createUl: false,        
//rowsBefore:20,
//rowsAfter:20,
//cache:false,
items: items,
searchAll: function (query, items) {
var found = [];
for (var i = 0; i < items.length; i++) {
    if (items[i].title.toLowerCase().indexOf(query.toLowerCase()) >= 0 || query.trim() === '') found.push(i);
    if (items[i].sku.toLowerCase().indexOf(query.toLowerCase()) >= 0 || query.trim() === '') found.push(i);
}
return found; //return array with mathced indexes
},
itemTemplate:
'<div id="item-{{id}}" class="col-33 product" style="position:relative; height:260px;">' +
    '<div class="img-wraper">' +
        '<a href="/catalog/{{id}}/">' +
            '<img class="p-img" src="{{image}}"/>' +
        '</a>' +
        '<div class="stepper stepper-raised stepper-fill cart_stepper" data-id="{{id}}" data-sku="{{sku}}" data-price="{{price}}" data-value="0" data-min="0" data-max="100" data-step="1">' +
            '<div class="stepper-button-minus"></div>' +
            '<div class="stepper-value"></div>' +
            '<div class="stepper-button-plus"></div>' +
        '</div>' +
    '</div>' +
    '<div class="p-name">{{count}}:{{title}}</div>' +
    '<div class="p-sku">Price: £{{price}}</div>' +
    // '<div class="p-sku">Pack Size: {{qtypp}}</div>' +
'</div>',
height: 260,

What am I missing?

2

Read about keepAlive and / or stackPages

3

Thanks Shastox, That resolved my issue.