Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<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'
        },
        reverse: {
          type: Boolean,
          value: false
        },
        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) {
        // Also tried what is commented out
        //this.$.list.items = this.items.sort(this._computeSort(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;
        //this.items.sort(this._computeSort(val, ord));
        //this.$.list.items = this.items.sort(this._computeSort(val, ord));
        console.log('ord: ' + ord); // All values logged
        console.log('val: ' + val); // Logs are correct
        console.log('items: ' + this.items); // See console log
      },
      _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>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
robdodsonpro
0viewers