CODEWITHSUNDEEP
polymer
woisme
woisme

Reputation: 279

Polymer 1.0 observe not firing for a filter

Using the new Polymer data binding we want to use observe to know when the filter fires when a button is pressed. The titles of the buttons are dynamic as they are pulled in from Firebase and we are using getAtribute with success on that. But we cannot get the filter to fire. We have put the observe in the dom repeat but nothing is happening. Hope someone can help.

jsbin

<html>

<head>
  <meta charset="utf-8">
  <base href="http://golowan.org/stuff/bower_components/">
  <script href="webcomponentsjs/webcomponents-lite.js"></script>

  <link rel="import" href="paper-styles/paper-styles-classes.html">
  <link rel="import" href="iron-flex-layout/classes/iron-flex-layout.html">
  <link rel="import" href="paper-drawer-panel/paper-drawer-panel.html">
  <link rel="import" href="paper-header-panel/paper-header-panel.html">
  <link rel="import" href="iron-icons/iron-icons.html">
  <link rel="import" href="paper-toolbar/paper-toolbar.html">
  <link rel="import" href="paper-icon-button/paper-icon-button.html">
  <link rel="import" href="paper-menu/paper-menu.html">
  <link rel="import" href="paper-material/paper-material.html">
  <link rel="import" href="paper-item/paper-item.html">
  <link rel="import" href="iron-selector/iron-selector.html">
  <link rel="import" href="iron-pages/iron-pages.html">
  <link rel="import" href="platinum-sw/platinum-sw-register.html">
  <link rel="import" href="platinum-sw/platinum-sw-cache.html">
  <link rel="import" href="paper-toast/paper-toast.html">
  <link rel="import" href="paper-filter/paper-filter.html">
  <link rel="import" href="firebase-element/firebase-document.html">
  <link rel="import" href="firebase-element/firebase-collection.html">
  <link rel="import" href="iron-input/iron-input.html">

</head>

<body>
  <template is="dom-bind" id="app">
    <my-list></my-list>
  </template>
  <dom-module id="my-list">
    <style>
      :host {
        display: block;
      }
      paper-material {
        margin: 16px, 16px;
        height: 100px;
        width: 200px;
        padding: 16px 0px 16px 0px;
      }
        paper-button {
    background: #fff;
    min-width: 172px;
    margin: 0px 2px 6px;
  }
  .mini-badge {
    display: inline-block;
    min-width: 10px;
    padding: 3px 7px;
    font-size: 12px;
    font-weight: 100;
    color: #FFF;
    line-height: 1.2;
    vertical-align: baseline;   
    background-color: #6F6F6F;
    border-radius: 10px;
  }
    </style>
    <template>
      <firebase-collection location="https://hi9.firebaseio.com/cards/data/card" data="{{cards}}">
      </firebase-collection>
      
      <template is="dom-repeat" items="{{filters}}" as="x" observe="obj_filters">
        <paper-button raised$="{{!x.filtered}}" on-tap="setFilter" filter="type" title="{{x.name}}">
          <span>{{x.name}}</span> <span class="mini-badge">{{x.num}}</span>
        </paper-button>
      </template>
      <template is="dom-repeat" items="{{cards}}" filter="filter_cards"  observe="refilter obj_filters.type filters" as="card">
        <paper-material>
          <span class="paper-font-body1">{{card.value}}</span>
       <!-- <img src="{{card.image}}" width="100px" /> -->
        </paper-material>
      </template>
    </template>
    <script>
      
(function() {
  Polymer({
    is: 'my-list',
    properties: {
      filters: {
        type: Array
      },
      refilter:Boolean,
      obj_filters: {
        type: Object,
        value: {}
      },
      output: {
        type: Array,
        notify: true
      },
      cards: {
        type: Array,
        notify: true
      }
    },
    observers: ['outputChanged(cards.* )'],
    outputChanged: function(stuff) {
      this.filters = this.justProperties(this.cards, "type");
    },
    filter_cards: function(data) {
      var types = this.obj_filters;
      for (var key in types) {
        if (types.hasOwnProperty(key)) {
          var obj = types[key];
          for (var prop in obj) {
            if(obj.hasOwnProperty(prop)){
              if (data.hasOwnProperty(key)) {
                if (obj[prop]) {
                  if (data[key].indexOf(prop) === -1 ) {
                    return false;
                  }
                }
              } else {
                return false;
              }
            }
          }
        }
      }
      return true;
    },
    justProperties: function(data, properties) {
      console.log('justProperties');
      var output = [];
      var outputNum = [];
      if (data !== undefined && data !== null && Array.isArray(data) && data.length > 1) {
        var test = function(entryA) {
          if (output.indexOf(entryA) === -1) {
            output.push(entryA);
            outputNum.push(1);
          } else {
            outputNum[output.indexOf(entryA)]++;
          }
        };
        for (var i = 0, l = data.length; i < l; i++) {
          test(data[i][properties]);
        }
      }
      var result = [];
      for (var a = 0, x = output.length; a < x; a++) {
        result[a] = {
          name: output[a],
          num: outputNum[a],
          filtered: this.ifFiltered(output[a], properties)
        };
      }
      result.sort(function(a, b) {
        return b.num - a.num;
      });
      
      console.log(result);
      return result;
    },
    ifFiltered: function(name, properties) {
      if (this.obj_filters.hasOwnProperty(properties)) {
        if (this.obj_filters[properties].hasOwnProperty(name)) {
          return this.obj_filters[properties][name];
        } else {
          return false;
        }
      } else {
        return false;
      }
    },
    justOfTypes: function(data){ console.log('justOfTypes');
      if (value === null) {
        return null;
      }
      if (isEmpty(types)) {
        return value;
      } else {
        var output = [];
        value.forEach(function(entry) {
          if (hasTypes(data[entry],types)) {
            output.push(entry); 
          }
        });
        return output;
      }
    },
    setFilter: function(e) {
      var filter = e.currentTarget.getAttribute('filter');
      var title  = e.currentTarget.getAttribute('title');

      if (this.obj_filters.hasOwnProperty(filter)) {
        if (this.obj_filters[filter].hasOwnProperty(title)) {
          delete this.obj_filters[filter][title];
        } else {
          this.set("obj_filters."+filter+'.'+title , true);
        }
      } else {
        if (this.obj_filters === undefined) {
          this.obj_filters = {};
        }
        this.obj_filters[filter] = {};
        this.set("obj_filters." + filter+'.'+title , true);
      }
      this.set("filters", this.justProperties(this.cards, "type"));
      this.set("refilter", !this.refilter);
      console.log(this.obj_filters);
    }
  });
})();

    </script>
  </dom-module>

</body>
</html>

Upvotes: 2

Views: 839

Answers (1)

Zikes
Zikes

Reputation: 5886

The observe property of dom-repeat will only observe sub-fields of the object passed into its items property. This makes complex filtering a bit trickier, but you seem to have narrowed down where you want to trigger it, so give your repeating template an ID (like cardlist)and in place of your this.set("refilter", !this.refilter); line put this.$.cardlist.render().

Upvotes: 4

Related Questions