public
Created

Mutation optimization for YUI 3 DataTable

  • Download Gist
gistfile1.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81
// Include this after the table's render()
// CAVEAT: this is NOT compatible with nodeFormatters
table.body._afterDataChange = function (e) {
var type = (e.type.match(/:(add|remove|change)$/) || [])[1],
odd = ['yui3-datatable-odd', 'yui3-datatable-even'],
even = ['yui3-datatable-even', 'yui3-datatable-odd'],
row, index;
 
switch (type) {
case 'change':
this._refreshRow(this.getRow(e.target), e.target, e);
break;
case 'add':
index = e.index;
row = Y.Node.create(this._createRowHTML(e.model, index));
 
this.get('container').insert(row, index);
 
row.get('parentNode.childNodes').slice(index + 1)
.each(function (node, i) {
var classes = (i + index) % 2 ? odd : even;
 
node.replaceClass.apply(node, classes);
});
 
break;
case 'remove':
row = this.getRow(e.index);
index = e.index;
 
row.get('parentNode.childNodes').slice(index + 1)
.each(function (node, i) {
var classes = (i + index) % 2 ? even : odd;
 
node.replaceClass.apply(node, classes);
});
 
row.remove(true);
 
break;
default:
this.render();
}
};
 
table.body._refreshRow = function (row, model, e) {
var index = row.get('rowIndex');
 
row.replace(this._createRowHTML(model, index));
};
 
// Alternate if you want to update cells specifically
// CAVEAT: This does not update cells with formatters that reference the changed fields
// CAVEAT #2: This also doesn't update cells in all columns that share a key
table.body._refreshRow = function (row, model, e) {
var key;
 
for (key in e.changed) {
if (e.changed.hasOwnProperty(key)) {
this._refreshCell(row.one('.yui3-datatable-col-' + key), model, this.get('host').getColumn(key));
}
}
};
 
table.body._refreshCell = function (cell, model, column) {
var content;
 
if (column.nodeFormatter) {
// TODO: copy logic invoking the nodeFormatter
} else {
if (column.formatter) {
// TODO: copy logic invoking and reacting to changes to o from formatter
} else {
content = model.get(column.key);
}
 
// TODO: apply column.emptyCellValue if appropriate
cell.setHTML(column.allowHTML ? content : Y.Escape.html(content));
}
};

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.