How can I do an asc and desc sort using underscore.js?

后端 未结 5 685
遇见更好的自我
遇见更好的自我 2020-12-02 06:55

I am currently using underscorejs for sort my json sorting. Now I have asked to do an ascending and descending sorting using underscore.js. I do no

5条回答
  •  臣服心动
    2020-12-02 07:12

    Underscore Mixins

    Extending on @emil_lundberg's answer, you can also write a "mixin" if you're using Underscore to make a custom function for sorting if it's a kind of sorting you might repeat in an application somewhere.

    For example, maybe you have a controller or view sorting results with sort order of "ASC" or "DESC", and you want to toggle between that sort, you could do something like this:

    Mixin.js

    _.mixin({
        sortByOrder: function(stooges, prop, order) {
          if (String(order) === "desc") {
              return _.sortBy(stooges, prop).reverse();
          } else if (String(order) === "asc") {
              return _.sortBy(stooges, prop);
          } else {
              return stooges;
          }
        }
    })
    

    Usage Example

    var sort_order = "asc";
    var stooges = [
      {name: 'moe', age: 40}, 
      {name: 'larry', age: 50}, 
      {name: 'curly', age: 60},
      {name: 'July', age: 35},
      {name: 'mel', age: 38}
     ];
    
    _.mixin({
        sortByOrder: function(stooges, prop, order) {
        if (String(order) === "desc") {
            return _.sortBy(stooges, prop).reverse();
        } else if (String(order) === "asc") {
            return _.sortBy(stooges, prop);
        } else {
            return stooges;
        }
      }
    })
    
    
    // find elements
    var banner = $("#banner-message");
    var sort_name_btn = $("button.sort-name");
    var sort_age_btn = $("button.sort-age");
    
    function showSortedResults(results, sort_order, prop) {
        banner.empty();
        banner.append("

    Sorting: " + prop + ', ' + sort_order + "


    ") _.each(results, function(r) { banner.append('
  • ' + r.name + ' is '+ r.age + ' years old.
  • '); }) } // handle click and add class sort_name_btn.on("click", function() { sort_order = (sort_order === "asc") ? "desc" : "asc"; var sortedResults = _.sortByOrder(stooges, 'name', sort_order); showSortedResults(sortedResults, sort_order, 'name'); }) sort_age_btn.on('click', function() { sort_order = (sort_order === "asc") ? "desc" : "asc"; var sortedResults = _.sortByOrder(stooges, 'age', sort_order); showSortedResults(sortedResults, sort_order, 'age'); })

    Here's a JSFiddle demonstrating this: JSFiddle for SortBy Mixin

提交回复
热议问题