Backbone.jsを使用した逆ソート順
Backbone.js を使用すると、コンパレータ関数を使用してセットアップされたコレクションが得られます。モデルをうまく並べ替えていますが、順序を逆にしたいと思います。
モデルを昇順ではなく降順で並べ替えるにはどうすればよいですか？
さて、コンパレータから負の値を返すことができます。たとえば、Backboneのサイトの例を取り上げて、順序を逆にしたい場合、次のようになります。
var Chapter = Backbone.Model;
var chapters = new Backbone.Collection;
chapters.comparator = function(chapter) {
return -chapter.get("page"); // Note the minus!
};
chapters.add(new Chapter({page: 9, title: "The End"}));
chapters.add(new Chapter({page: 5, title: "The Middle"}));
chapters.add(new Chapter({page: 1, title: "The Beginning"}));
alert(chapters.pluck('title'));
個人的に、私はここで与えられた解決策のどれにも満足していません：
ソートタイプが非数値の場合、-1で乗算するソリューションは機能しません。これを回避する方法はありますが（たとえば、
Date.getTime()を呼び出すことにより）、これらのケースは特定です。ソートされるフィールドの特定のタイプを心配することなく、あらゆるソートの方向を逆にする一般的な方法が欲しいです。文字列ソリューションの場合、特に大規模なコレクション（または実際には大規模なソートフィールド文字列）を使用する場合、一度に1文字ずつ文字列を作成するとパフォーマンスのボトルネックのように見えます
文字列、日付、数値フィールドに対してうまく機能するソリューションを次に示します。
まず、次のように、sortBy関数の結果の結果を逆にするコンパレーターを宣言します。
function reverseSortBy(sortByFunction) {
return function(left, right) {
var l = sortByFunction(left);
var r = sortByFunction(right);
if (l === void 0) return -1;
if (r === void 0) return 1;
return l < r ? 1 : l > r ? -1 : 0;
};
}
さて、ソートの方向を逆にしたい場合、私たちがする必要があるのは次のとおりです：
var Chapter = Backbone.Model;
var chapters = new Backbone.Collection;
// Your normal sortBy function
chapters.comparator = function(chapter) {
return chapter.get("title");
};
// If you want to reverse the direction of the sort, apply
// the reverseSortBy function.
// Assuming the reverse flag is kept in a boolean var called reverseDirection
if(reverseDirection) {
chapters.comparator = reverseSortBy(chapters.comparator);
}
chapters.add(new Chapter({page: 9, title: "The End"}));
chapters.add(new Chapter({page: 5, title: "The Middle"}));
chapters.add(new Chapter({page: 1, title: "The Beginning"}));
alert(chapters.pluck('title'));
これが機能する理由は、ソート関数に2つの引数がある場合、Backbone.Collection.sortの動作が異なるためです。この場合、Array.sortに渡されるコンパレータと同じように動作します。このソリューションは、単一の引数sortBy関数を2つの引数コンパレータに適合させ、結果を逆にすることにより機能します。
Backbone.jsのコレクションコンパレータは、Underscore.jsのメソッド_.sortByに依存しています。 sortByの実装方法は、javascript .sort（）を「ラップ」して、文字列を逆順にソートすることを困難にします。文字列の単純な否定は、NaNを返し、ソートを中断します。
逆アルファベット順ソートなど、文字列を使用した逆ソートを実行する必要がある場合は、実際にハックする方法があります。
comparator: function (Model) {
var str = Model.get("name");
str = str.toLowerCase();
str = str.split("");
str = _.map(str, function(letter) {
return String.fromCharCode(-(letter.charCodeAt(0)));
});
return str;
}
決してきれいではありませんが、「文字列否定子」です。 javascriptのネイティブオブジェクトタイプを変更することに不安がない場合は、文字列否定子を抽出し、String.Prototypeのメソッドとして追加することで、コードを明確にすることができます。ただし、javascriptのネイティブオブジェクトタイプを変更すると予期しない結果が生じる可能性があるため、何をしているのかがわかっている場合にのみ、おそらくこれを実行する必要があります。
私の解決策は、ソート後に結果を逆にすることでした。
二重レンダリングを防止するには、最初にサイレントでソートしてから、「リセット」をトリガーします。
collections.sort({silent:true})
collections.models = collections.models.reverse();
collections.trigger('reset', collections, {});
コンパレータ関数を変更して、現在のデータを返すのではなく、逆に比例する値を返します。いくつかのコード： http://documentcloud.github.com/backbone/#Collection-comparator
例：
var Chapter = Backbone.Model;
var chapters = new Backbone.Collection;
/* Method 1: This sorts by page number */
chapters.comparator = function(chapter) {
return chapter.get("page");
};
/* Method 2: This sorts by page number in reverse */
chapters.comparator = function(chapter) {
return -chapter.get("page");
};
chapters.add(new Chapter({page: 9, title: "The End"}));
chapters.add(new Chapter({page: 5, title: "The Middle"}));
chapters.add(new Chapter({page: 1, title: "The Beginning"}));
次は私のためにうまくいった：
comparator: function(a, b) {
// Optional call if you want case insensitive
name1 = a.get('name').toLowerCase();
name2 = b.get('name').toLowerCase();
if name1 < name2
ret = -1;
else if name1 > name2
ret = 1;
else
ret = 0;
if this.sort_dir === "desc"
ret = -ret
return ret;
}
collection.sort_dir = "asc";
collection.sort(); // returns collection in ascending order
collection.sort_dir = "desc";
collection.sort(); // returns collection in descending order
Backboneコンパレータ関数がJavaScriptのArray.prototype.sort（）関数を使用または模倣する場所をいくつか読みました。つまり、1、-1、または0のいずれかを使用して、コレクション内の各モデルの並べ替え順序を決定します。これは絶えず更新され、コレクションはコンパレータに基づいて正しい順序のままになります。
Array.prototype.sort（）に関する情報は、ここにあります： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort?redirectlocale=en- US＆redirectslug = JavaScript％2FReference％2FGlobal_Objects％2FArray％2Fsort
この質問に対する多くの回答は、ページにそれをレンダリングする直前に順序を単に逆にします。これは理想的ではありません。
上記のMozillaに関する記事をガイドとして使用し、次のコードを使用してコレクションを逆順でソートし、コレクションを現在の順序でページにレンダリングするだけで、順序を逆にするためにフラグ（reverseSortDirection）を使用できます。
//Assuming this or similar will be in your Backbone.Collection.
sortKey: 'id', //The field name of the item in your collection
reverseSortDirection: false,
comparator: function(a, b) {
var sampleDataA = a.get(this.sortKey),
sampleDataB = b.get(this.sortKey);
if (this.reverseSortDirection) {
if (sampleDataA > sampleDataB) { return -1; }
if (sampleDataB > sampleDataA) { return 1; }
return 0;
} else {
if (sampleDataA < sampleDataB) { return -1; }
if (sampleDataB < sampleDataA) { return 1; }
return 0;
}
},
2つのモデルを除くコンパレータ。コレクションまたはモデルの変更時に、コンパートメント関数が実行され、コレクションの順序が変更されます。
私はこのアプローチをNumbersとStringsでテストしましたが、完璧に機能しているようです。
私はこの問題に何度も苦労しており、通常は回避策を使用することになるため、この答えが役立つことを本当に願っています。
これはsortByメソッドをオーバーライドすることでエレガントに行うことができます。ここに例があります
var SortedCollection = Backbone.Collection.extend({
initialize: function () {
// Default sort field and direction
this.sortField = "name";
this.sortDirection = "ASC";
},
setSortField: function (field, direction) {
this.sortField = field;
this.sortDirection = direction;
},
comparator: function (m) {
return m.get(this.sortField);
},
// Overriding sortBy (copied from underscore and just swapping left and right for reverse sort)
sortBy: function (iterator, context) {
var obj = this.models,
direction = this.sortDirection;
return _.pluck(_.map(obj, function (value, index, list) {
return {
value: value,
index: index,
criteria: iterator.call(context, value, index, list)
};
}).sort(function (left, right) {
// swap a and b for reverse sort
var a = direction === "ASC" ? left.criteria : right.criteria,
b = direction === "ASC" ? right.criteria : left.criteria;
if (a !== b) {
if (a > b || a === void 0) return 1;
if (a < b || b === void 0) return -1;
}
return left.index < right.index ? -1 : 1;
}), 'value');
}
});
したがって、次のように使用できます。
var collection = new SortedCollection([
{ name: "Ida", age: 26 },
{ name: "Tim", age: 5 },
{ name: "Rob", age: 55 }
]);
//sort by "age" asc
collection.setSortField("age", "ASC");
collection.sort();
//sort by "age" desc
collection.setSortField("age", "DESC");
collection.sort();
このソリューションはフィールドタイプに依存しません。
// For numbers, dates, and other number-like things
var things = new Backbone.Collection;
things.comparator = function (a, b) { return b - a };
// For strings
things.comparator = function (a, b) {
if (a === b) return 0;
return a < b ? -1 : 1;
};
現在の順序を単に反転させたい人のための、本当に簡単なソリューションを以下に示します。列を2方向に並べることができるテーブルがある場合に便利です。
collection.models = collection.models.reverse()
テーブルケース（coffeescript）に興味がある場合は、このようなものと組み合わせることができます。
collection.comparator = (model) ->
model.get(sortByType)
collection.sort()
if reverseOrder
collection.models = collection.models.reverse()
Idの逆順：
comparator: function(object) { return (this.length - object.id) + 1; }
私はテーブルにモデルを表示するというわずかに異なる要件があり、任意の列（モデルプロパティ）および昇順または降順でソートできるようにしたかったのです。
すべてのケースを機能させるにはかなりの手間がかかりました（値は文字列、空の文字列、日付、数値になります。しかし、これはかなり近いと思います。
inverseString: function(str)
{
return str.split("").map(function (letter) { return String.fromCharCode(-(letter.charCodeAt(0))); }).join("");
}
getComparisonValue: function (val, desc)
{
var v = 0;
// Is a string
if (typeof val === "string")
{
// Is an empty string, upgrade to a space to avoid strange ordering
if(val.length === 0)
{
val = " ";
return desc ? this.inverseString(val) : val;
}
// Is a (string) representing a number
v = Number(val);
if (!isNaN(v))
{
return desc ? -1 * v : v;
}
// Is a (string) representing a date
v = Date.parse(val);
if (!isNaN(v))
{
return desc ? -1 * v : v;
}
// Is just a string
return desc ? this.inverseString(val) : val;
}
// Not a string
else
{
return desc ? -1 * val : val;
}
},
つかいます：
comparator: function (item)
{
// Store the collumn to 'sortby' in my global model
var property = app.collections.global.get("sortby");
// Store the direction of the sorting also in the global model
var desc = app.collections.global.get("direction") === "DESC";
// perform a comparison based on property & direction
return this.getComparisonValue(item.get(property), desc);
},
以下は、UnderscoreJSを使用してコレクションのモデルを逆ソートする迅速かつ簡単な方法です。
var reverseCollection = _.sortBy(this.models, function(model) {
return self.indexOf(model) * -1;
});最近この問題に遭遇し、rsortメソッドを追加することにしました。
Collection = Backbone.Collection.extend({
comparator:function(a, b){
return a>b;
},
rsort:function(){
var comparator = this.comparator;
this.comparator = function(){
return -comparator.apply(this, arguments);
}
this.sort();
this.comparator = comparator;
}
});
うまくいけば、誰かがこれを役に立つと思うでしょう
並べ替え関数をオーバーライドして、完了時にモデル配列を逆にします。また、リバースが完了するまで「ソート」イベントのトリガーを保留しました。
sort : function(options){
options = options || {};
Backbone.Collection.prototype.sort.call(this, {silent:true});
this.models.reverse();
if (!options.silent){
this.trigger('sort', this, options);
}
return this;
},