Skip to content

Instantly share code, notes, and snippets.

@lsmith
Created April 3, 2012 19:42
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save lsmith/2295032 to your computer and use it in GitHub Desktop.
Save lsmith/2295032 to your computer and use it in GitHub Desktop.
Mutation optimization for YUI 3 DataTable
// 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));
}
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment