Hello,
My Virtual list does not seem to reload after getting data successfully from my API call. Am using self.$setState to update the DOM.
My Code:
data: function() {
var items = [];
return {
items: items
};
},
on: {
pageBeforeRemove: function () {
var self = this;
self.virtualList.destroy();
},
pageInit: function() {
var self = this;
self.virtualList = self.$app.virtualList.create({
// List Element
el: self.$el.find('.virtual-list'),
// Pass array with items
items: self.items,
// Custom search function for searchbar
searchAll: function (query, items) {
var found = [];
for (var i = 0; i < items.length; i++) {
if (items[i].inventory_main_list_desc)
{
if (items[i].inventory_main_list_desc.toLowerCase().indexOf(query.toLowerCase()) >= 0 || query.trim() === '') found.push(i);
}
if (items[i].inventory_main_list_code)
{
if (items[i].inventory_main_list_code.toLowerCase().indexOf(query.toLowerCase()) >= 0 || query.trim() === '') found.push(i);
}
if (items[i].inventory_main_list_cat_desc)
{
if (items[i].inventory_main_list_cat_desc.toLowerCase().indexOf(query.toLowerCase()) >= 0 || query.trim() === '') found.push(i);
}
}
return found; //return array with mathced indexes
},
// List item Template7 template
itemTemplate:
'<li>' +
'<a href="/inventory-confirm-item/{{uuid}}"class="item-link item-content">' +
'<div class="item-inner">' +
'<div class="item-title-row">' +
'<div class="item-title">' +
'<div class="item-header"><b>{{inventory_main_list_desc}}</b></div>'+
'<input id={{uuid}} name="my_uuid" type="hidden" value="{{uuid}}">' +
'<span class="badge color-blue">{{inventory_main_list_code}}</span> '+
'<span class="badge color-green">{{inventory_main_list_cat_desc}}</span> '+
'</div>' +
'</div>' +
'</div>' +
'</a>' +
'</li>',
// Item height
height: self.$theme.ios ? 63 : 73,
});
var postData = {
"payload" : {}
};
postFinalData = process_api_data(postData);
//console.log(postFinalData);
app.preloader.show();
app.request({
url : GBL_ENDPOINT,
method : 'POST',
dataType : 'json',
crossDomain : true,
data : postFinalData,
success: function (data) {
if (data === undefined || data === null || data === "No Data")
{
final_post = [];
}
else
{
final_post = my_payload;
}
self.$setState({
items: final_post
});
var vl = app.virtualList.get('.virtual-list');
vl.appendItems(self.items);
// We have received response and can hide activity indicator
app.preloader.hide();
},
error: function(xhr, textStatus, errorThrown){
// We have received response and can hide activity indicator
app.preloader.hide();
self.$setState({
items: []
});
var vl = app.virtualList.get('.virtual-list');
vl.appendItems(self.items);
// We have received response and can hide activity indicator
app.preloader.hide();
},
}
}
What’s missing?