I would like to display the results from an Ajax API request to a virtual list. I cannot display and I highly suspect that the issue is that page is rendered before the results of the call of the query are back.
How do I handle that?
return {
data: function() {
var $ = this.$;
var app = this.$app;
app.request({
url: http://example.com,
method: 'POST',
dataType: 'json',
crossDomain: true,
data: postData,
success: function(data, textStatus ){
items = data;
},
error: function(xhr, textStatus, errorThrown){
},
});
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].title.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="./manage-quote/{{title}}" class="item-link item-content">' +
'<div class="item-inner">' +
'<div class="item-title-row">' +
'<div class="item-title">{{title}}</div>' +
'</div>' +
'<div class="item-subtitle">{{subtitle}}</div>' +
'</div>' +
'</a>' +
'</li>',
// Item height
height: self.$theme.ios ? 63 : 73,
});
}
}
}