javascript - 为什么我无法按 2 个字段的差异对列表进行排序？

Question

所以我有一个项目列表。

每个项目都有一个喜欢或不喜欢的按钮。我希望按总分排序，即 = # 喜欢少 # 不喜欢。

我试图理解为什么:

1. 下面的 Handlebars + 排序在客户端不起作用，如何使其工作？
2. 如果服务器端解决方案会更好，为什么？ (服务器端占用了我在其他帖子中学到的不必要的磁盘空间和过早的优化 - 是的，我仍处于早期阶段)

这就是我将其存储在集合中 items.js 中的列表中的方式(ground 0 表单)。

var item = _.extend(itemAttributes, {
  lovers:       [], 
  likes:        0,
  haters:       [], 
  dislikes:     0
  //popularity:      likes - dislikes I tried inserting in collection but doesnt work too 
});

所以我通过 Handlebars 助手+主列表 Controller 的扩展对其进行排序

这是 Handlebars 部分

Template.registerHelper('popularity', function(likes, dislikes) {
    var popularity = likes - dislikes;
    return popularity;

这是router.js中的排序器

BestItemController = ItemListController.extend({
  sort: {popularity: -1},
    nextPath: function() {
    return Router.routes.BestItem.path({itemsLimit: this.itemsLimit() + this.increment})
  }
});

因此， Handlebars 流行度计算确实有效，流行度分数出现在添加{{流行度123numbersxx }}

但是排序不起作用，可能是因为排序不是“表面上”计算排序，而是对实际项目及其字段进行排序？

我尝试插入额外的架构字段(请参阅上面的注释行)。然而，这会导致错误，指出 likes 未定义。

有人能帮我指导一下吗？另外，如果您认为我的做事方法不好，请问还有其他方法吗？例如，如果对各个模板 helper.js 文件而不是主 router.js 文件进行排序。

非常感谢!

Answer 1

您可以在客户端实现该功能。以下是我将如何进行:

您可能会使用 {{#each item}} 迭代来显示要排序的 item。我将用自定义助手替换 #each 中的 item 并创建一个函数，使用光标或数组作为参数，该函数将使用当前排序对项目进行排序设置。

你的助手可能看起来像这样:

Template.items.helpers({
  sortedItems: function(){
    return sortMyItems(items.find()) //add .fetch() if you need an array,
                                     //or directly your array if you already have it in a variable.
  }
});

并在文件的开头添加 sortMyItems 函数，用于返回排序后的项目列表。

sortMyItems = function(cursor) {
    if(!cursor) {
        return [];
    }
    var sortBy = Session.get("sortBy");// in your case, it would be set to "popularity"
    var sortAscending = Session.get("sortAscending ");
    if(typeof(sortAscending) == "undefined") sortAscending = true;
    var sorted = [];
    var raw = cursor.fetch();
    // sort
    if(sortBy) {
        sorted= _.sortBy(raw, sortBy);

        // descending?
        if(!sortAscending) {
            sorted= sorted.reverse();
        }
    }

    return sorted;
}

这里我使用 session 变量，但我建议您最好使用响应式(Reactive)变量或响应式(Reactive)字典，因为这是仅与当前 View 相关的功能。