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>
​
      <firebase-collection location="https://dinosaur-facts.firebaseio.com/dinosaurs" data="{{items}}"></firebase-collection>
      <paper-input label="Search" value="{{searchString::input}}"></paper-input>
      <div>[[searchString]]</div>
      <div>[[sortby]]</div>
      <paper-dropdown-menu label="Sort by">
        <paper-menu class="dropdown-content" selected="{{sortby}}" attr-for-selected="data-sortby">
          <paper-item data-sortby="none">None </paper-item>
          <paper-item data-sortby="order">Order</paper-item>
        </paper-menu>
      </paper-dropdown-menu>
      <template is="dom-repeat" items="{{items}}" as="item" filter="{{computeFilter(searchString)}}" sort="_computeSort">
        <div>[[item.__firebaseKey__]], [[item.order]]</div>
      </template>
    </template>
​
    <script>
      Polymer({
        is: "my-element",
        computeFilter: function(string) {
          if (!string) {
            // set filter to null to disable filtering
            return null;
          } else {
            // return a filter function for the current search string
            string = string.toLowerCase();
            return function(item) {
              var name = item.__firebaseKey__.toLowerCase();
              var order = item.order.toLowerCase();
              return (name.indexOf(string) != -1 ||
                order.indexOf(string) != -1);
            };
          }
        },
        _computeSort: function(a, b) {
          if (a.order == b.order) {
            return 0;
          }
          return a.order > b.order ? -1 : 1;
        },
        properties: {
          items: {
            type: Array
          }
        }
      });
    </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
anonymouspro
0viewers