Dom Cache¶
Dom Cache is used to save rendered elements to speed POS up.
To add something to Dom Cache you need to do something like this:
this.cache = new screens.DomCache();
this.cache.cache_node(key, value);
To restore rendered element from cache do something like this
this.cache = new screens.DomCache();
var cache = this.cache.get_node(key);
Here is complete example from Point of Sale module:
The purpose of this code is the optimization of the elements rendering in POS. Each new POS loading use data from DomCache
- thereby save time for the rendering of new elements.
Let’s take the example:
POS Order History
module¶
In this in this module DomCache
is used when the orders’ list renders.
After the first loading POS elements of orders, which have been rendered (HTML code), are saved in Cache.
After reloading POS the existence of saved elements in Cache are checked and this data is used when orders are rendered.
init: function(parent, options) {
this._super(parent, options);
//object of DomCache,which we will use in order to address the methods of this object
this.orders_history_cache = new screens.DomCache();
},
render_list: function(orders) {
var contents = this.$el[0].querySelector('.order-list-contents');
contents.innerHTML = "";
for (var i = 0, len = Math.min(orders.length,1000); i < len; i++) {
var order = orders[i];
// getting cache via key
var orderline = this.orders_history_cache.get_node(order.id);
var lines_table = this.orders_history_cache.get_node(order.id + '_table');
/* here we check for the presence of cache among existing data
if there is no cache, then we render elements and save into cache
if the cache exists, we just use it
*/
if ((!orderline) || (!lines_table)) {
// rendering of elements may take time
var orderline_html = QWeb.render('OrderHistory',{widget: this, order:order});
orderline = document.createElement('tbody');
lines_table = document.createElement('tr');
var $td = document.createElement('td');
if (order.lines) {
$td.setAttribute("colspan", 8);
}
lines_table.classList.add('line-element-hidden');
lines_table.classList.add('line-element-container');
var line_data = this.get_order_line_data(order);
var $table = this.render_lines_table(line_data);
$td.appendChild($table);
lines_table.appendChild($td);
orderline.innerHTML = orderline_html;
orderline = orderline.childNodes[1];
//save the result into cache
this.orders_history_cache.cache_node(order.id, orderline);
this.orders_history_cache.cache_node(order.id + '_table', lines_table);
}
contents.appendChild(orderline);
contents.appendChild(lines_table);
}
},