Polymer 1.x: How to reverse order of records retur

How do I reverse the order of records returned by <firebase-collection> as follows:

<firebase-collection id="foo" order-by-child="bar">

Can I do it declaratively? Or do I need to call an imperative method like maybe...

this.$.foo = this.$.foo.reverse();

https://elements.polymer-project.org/elements/firebase-element?active=firebase-collection

Note: I'm using <iron-list> and not <template is="dom-repeat">.

回答1:

Simplest is just to use a <dom-repeat> with an inverse sort I believe.

sort. Specifies a comparison function following the standard Array sort API.

Per https://www.polymer-project.org/1.0/docs/devguide/templates.html#filtering-and-sorting-lists

回答2:

The best solution is to use <iron-list> then sort that according to this answer.

http://jsbin.com/vizexodoyi/1/edit?html,output

<html>

<head>
  <title>My Element</title>
  <script data-require="polymer@*" data-semver="1.0.0" src="http://www.polymer-project.org/1.0/samples/components/webcomponentsjs/webcomponents-lite.js"></script>
  <script data-require="polymer@*" data-semver="1.0.0" src="http://www.polymer-project.org/1.0/samples/components/polymer/polymer.html"></script>
  <base href="http://element-party.xyz/" />
  <link rel="import" href="all-elements.html" />
</head>

<body>
  <dom-module id="my-element">
    <template>
    <style>
      h3 {
        margin-bottom: 0px;
      }
      iron-list {
        padding-bottom: 16px;
        height: 100%;
      }
      .item {
        @apply(--layout-horizontal);
        margin: 16px 16px 0 16px;
        padding: 20px;
        border-radius: 8px;
        background-color: white;
        border: 1px solid #ddd;
       }
    </style>
    <firebase-collection location="https://dinosaur-facts.firebaseio.com/dinosaurs" data="{{items}}">
    </firebase-collection>
    <h3>Controls</h3>
    <paper-dropdown-menu label="Sort by">
      <paper-menu class="dropdown-content" selected="{{sortVal}}" attr-for-selected="data-sortby">
        <paper-item data-sortby="order">Order</paper-item>
        <paper-item data-sortby="height">Height</paper-item>
      </paper-menu>
    </paper-dropdown-menu>
    <br>
    <paper-toggle-button checked="{{reverse}}">Reverse</paper-toggle-button>
    <br /><br />
    <br><h3>Monitor Control Values</h3>
    <div>Sort by: [[sortVal]]</div>
    <div>Reverse: [[reverse]]</div>
    <br><h3>Iron-List Output</h3>
    <iron-list id="list" items="[[items]]" as="item">
      <template>
        <div class="item">
          Name: [[item.__firebaseKey__]]<br />
          Order: [[item.order]]<br />
          Height: [[item.height]]
        </div>
      </template>
    </iron-list>
    </template>
    <script>
    (function() {
      Polymer({
      is: "my-element",
      properties: {
        items: {
          type: Array,
        },
        sortVal: {
          type: String,
          value: 'order'
        },
        sortOrder: {
          type: Number,
          value: -1, // High to low
          computed: '_computeSortOrder(reverse)'
        }
      },
      observers: [
        'sortChanged(sortVal, sortOrder)'
      ],
      _computeSortOrder: function(bool) {
        return bool ? 1 : -1;
      },
      sortChanged(val, ord) {
        if (! this.items || this.items.length == 0) {
          return;
        }
        var temp = Array.prototype.slice.call(this.items);
        temp.sort(this._computeSort(val, ord));
        this.items = temp;
        //console.log('ord: ' + ord);
        //console.log('val: ' + val);
        //console.log('items: ' + this.items);
      },
      _computeSort: function(val, ord) {
        return function(a, b) {
          if (a[val] === b[val]) {
            return 0;
          }
          return (ord * (a[val] > b[val] ? 1 : -1));
        };
      }
     });
    })();
    </script>
  </dom-module>
  <my-element></my-element>
</body>

</html>