使用backbone.js 对字符串进行逆序排序

Question

我正在尝试以相反的顺序对 Backbone.js 集合进行排序。之前有关于如何使用整数执行此操作的答复，但没有关于字符串的答复。

var Chapter  = Backbone.Model;
var chapters = new Backbone.Collection;

chapters.comparator = function(chapter) {
  return chapter.get("title");
};

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'));

上面的代码从 A -> 开始对章节进行排序。 Z，但是我如何编写一个比较器来将它从 Z -> 排序？一个？

Answer 1

您可以：

• 获取字符串中每个字符的字符代码，
• 从 0xffff 中减去每个值（string.charCodeAt 的最大返回值），
• 使用 String。 fromCharCode 将其转回“否定”字符的字符串

，这将是您的排序键。

chapters.comparator = function(chapter) {
    return String.fromCharCode.apply(String,
        _.map(chapter.get("title").split(""), function (c) {
            return 0xffff - c.charCodeAt();
        })
    );
}

瞧：

> console.log(chapters.pluck('title'));
["The Middle", "The End", "The Beginning"]

注意：如果您的比较字符串很长（如 65 kb 或更长），您可能会遇到麻烦（请参阅下面 Matt 的评论）。为了避免这种情况，并稍微加快比较速度，只需使用比较字符串的较短部分即可。 （在上面的示例中，您可以改为使用 chapter.get("title").slice(0, 100).split("")。）您需要的切片长度取决于您的申请。

Answer 2

您可以使用两个版本的比较器函数，一种是 sortBy 版本 - 示例中所示，它采用一个参数；另一种是 sort - 您可以返回一个更标准的排序函数，文档说：

“sortBy”比较器函数采用一个模型并返回一个数字或字符串值，模型应根据该值相对于其他模型进行排序。 “sort”比较器函数采用两个模型，如果第一个模型应该在第二个模型之前，则返回 -1；如果它们具有相同的等级，则返回 0；如果第一个模型应该在第二个模型之后，则返回 1。

因此，在这种情况下，我们可以编写一个不同的比较器函数：

var Chapter  = Backbone.Model;
var chapters = new Backbone.Collection;

chapters.comparator = function(chapterA, chapterB) {
  if (chapterA.get('title') > chapterB.get('title')) return -1; // before
  if (chapterB.get('title') > chapterA.get('title')) return 1; // after
  return 0; // equal
};

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'));

因此您应该得到以下响应：

"The Middle", "The End", "The Beginning"

Answer 3

如果您正在处理非数字值，则没有明显的方法可以进行反向排序。 Backbone 利用 Underscore 的 _.sortBy() 和 _.sortedIndex() 方法根据比较器对模型进行排序，并且这些方法会自动按升序排序。最简单的方法是使用chapters.pluck('title').reverse()，因为pluck的结果将是一个数组。但是，在某些 Collection 方法上调用 reverse 会将 Collection 模型反转到位，因此下次调用它时，模型将按升序返回。您始终可以执行以下操作：

var results = [],
    titles  = chapters.pluck('title');

for(var i=0, len=titles.length; i<len; i++) {
  results.push(titles[i]);
}

results.reverse();

这不会影响 Backbone 集合中的模型数组，因为它将在内存中创建一个全新的结果数组，但保留对原始模型的引用，因此调用诸如 save 仍会更新 Collection 状态。

但这不是很优雅，并且每当您想要反转结果时，都会在整个项目中创建大量额外的编码。我认为我们可以做得更好。

为了使这项工作正常进行，您需要在比较器方法中执行一些笨重的 JavaScript ninjary 来完成这项工作 - 请注意，这是未经测试的：

chapters.comparator = function(chapter) {
  var alphabet = '0123456789abcdefghijklmnopqrstuvwxyz',
      title = chapter.get('title').toLowerCase(),
      inverse_title = '',
      index;

  for(var i=0, len=title.length; i<len; i++) {
    index = alphabet.indexOf(title.charAt(i));

    if(index === -1) {
      inverse_title += title.charAt(i);
      continue;
    }

    inverse_title += alphabet.charAt(alphabet.length - index - 1);
  }

  return inverse_title;
};

这个概念可能需要改进以考虑符号等，但本质上它以“Z”变为“0”、“Y”变为“1”等方式反转比较器字符串，这应该会产生您想要的反向排序。

Answer 4

由于 Backbone 仅使用 .sortBy 方法，只需在您自己的逻辑中进行代理：

collectionInQuestion.sortBy = function () {
  var models = _.sortBy(this.models, this.comparator);
  if (forSomeReason) {
    models.reverse();
  }
  return models;
};

..或将其添加到其他地方..

TweakedCollection = Backbone.Collection.extend({ sortBy: [...] })

Answer 5

我刚刚解决了表排序的类似问题，我想分享代码，因为我在这些答案中没有找到太多帮助：

events: {

    'click th.sortable': function(e) {
        var $this = $(e.target),
            order = $this.hasClass('asc') ? 'desc' : 'asc',
            field = $this.data('field'); /* this is a string */

        $this.siblings().addBack().removeClass('asc desc');
        $this.addClass( order );

        this.bodyView.collection.comparator = field;
        this.bodyView.collection.sort();
        if ( order === 'desc' ) this.bodyView.collection.models.reverse();

        this.bodyView.render();
    }

},

在这种情况下，我只是将比较器设置为字符串而不是函数；该字符串必须是要作为排序依据的属性的名称。
然后，如果顺序必须相反，我只需对模型调用反向。

Answer 6

只需在chapter.get前添加减号即可

chapters.comparator = function(chapter) {
    return -chapter.get("title");
};