Model/Collection Declaration
Inputs.Collection = Backbone.Collection.extend({
model: Inputs.Model,
url: "/apis/v2/inputs",
sortAttribute: "name", // supported attributes are model's element names + any custom strategies below
comparator: function(model)
{
return Utils.genericComparator.call(this, model);
},
strategies: {},
changeSort: function (sortAttribute)
{
if (this.strategies[sortAttribute]) {
this.comparator = this.strategies[sortAttribute];
return;
}
this.comparator = Inputs.Collection.prototype.comparator;
this.sortAttribute = sortAttribute;
},
parse: function (resp)
{
var data = ( resp && resp.input_list ) ? resp.input_list : [];
return data;
}
});
Initialization of Sort Method in View
initialize: function () // View Initialize
{
var self = this;
this.collection = new Inputs.Collection();
var currentMethod = app.storageModel.load("inputs:sort");
if (currentMethod) {
this.collection.changeSort(currentMethod);
} else {
app.storageModel.save("inputs:sort", this.collection.sortAttribute);
}
...
},
afterRender: function()
{
// Indicate to user what we are sorting
var currentMethod = this.collection.sortAttribute;
if (currentMethod && currentMethod.match(/_r$/)) {
// reserve sorting
this.$(".jsSort[data-sort=\""+currentMethod.replace(/_r$/,"")+"\"]").addClass("down");
} else {
this.$(".jsSort[data-sort=\""+currentMethod+"\"]").addClass("up");
}
},
Dynamic Code to Change Sort Method
events: {
"click .jsSort": "sortTable"
},
sortTable: function(e)
{
var sortBy = $(e.currentTarget).data("sort");
var currentMethod = app.storageModel.load("inputs:sort");
if (sortBy === currentMethod) {
sortBy += "_r"; // reserve sorting
}
this.collection.changeSort(sortBy);
this.collection.sort();
app.storageModel.save("inputs:sort", sortBy);
this.render();
},
Html Code
<div class="span4 sort jsSort unselectable" data-sort="name">Name</div>
<div class="span5 sort jsSort unselectable" data-sort="url">Connection</div>
<div class="span2 sort jsSort unselectable" data-sort="state">Status</div
Generic Sort Code
// Comparator Function for Collection sort
//
// Usage:
// My.Collection = Backbone.Collection.extend({
// sortAttribute: "name", // supported attributes are model's element names + any custom strategies below
// comparator: function(model) { return Utils.genericComparator.call(this, model); },
// strategies: { <your own custom strategy not covered by genericComparator> },
// changeSort: function (sortAttribute) {
// if (this.strategies[sortAttribute]) {
// this.comparator = this.strategies[sortAttribute];
// return;
// }
// this.comparator = My.Collection.prototype.comparator;
// this.sortAttribute = sortAttribute;
// },
// ...
// });
Utils.genericComparator = function (model)
{
var last = this.sortAttribute.slice(-2); // last 3 chars
var reversed = false;
var attribute = this.sortAttribute;
if (last === "_r") {
attribute = this.sortAttribute.substr(0, this.sortAttribute.length-2);
reversed = true;
}
var value = model.get(attribute);
var matches;
if (matches = attribute.match(/\((.*)\)$/)) // ends with () ?
{
// function call
var fname = attribute.substring(0, attribute.length - matches[0].length);
if (fname.indexOf(".") > 0)
{
var flist = fname.split(".");
var args = matches[1].replace(/'/g, "");
if (flist.length == 2)
{
value = model[flist[0]][flist[1]](args);
}
} else {
value = model[fname](matches[1]);
}
}
var retval = Utils.genericComparatorFromValue(value, reversed);
return retval;
};
// Takes a value as input format it for consistant compare and optionally reverse it
// Returns value prepped for compare
Utils.genericComparatorFromValue = function (value, reversed) {
if (_.isUndefined(value)) {
return value;
}
if (typeof value.toLowerCase === "function") {
// string type
var string = value.toLowerCase();
if (reversed) {
string = string.split(""); // string to array
string = _.map(string, function(letter) { return String.fromCharCode(-(letter.charCodeAt(0))); });
return string;
}
return string;
} else if (value === true || value === false) {
// boolean type
return reversed ? !value : value;
} else if (value === null) {
return value;
} else {
// integer, float
return reversed ? -value : value;
}
};
Recent Comments