Polymer 1.0 observe not firing for a filter

by Code Error
Posted By: Anonymous

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

_x000D_

_x000D_

<html>_x000D_
_x000D_
<head>_x000D_
  <meta charset="utf-8">_x000D_
  <base href="http://golowan.org/stuff/bower_components/">_x000D_
  <script href="webcomponentsjs/webcomponents-lite.js"></script>_x000D_
_x000D_
  <link rel="import" href="paper-styles/paper-styles-classes.html">_x000D_
  <link rel="import" href="iron-flex-layout/classes/iron-flex-layout.html">_x000D_
  <link rel="import" href="paper-drawer-panel/paper-drawer-panel.html">_x000D_
  <link rel="import" href="paper-header-panel/paper-header-panel.html">_x000D_
  <link rel="import" href="iron-icons/iron-icons.html">_x000D_
  <link rel="import" href="paper-toolbar/paper-toolbar.html">_x000D_
  <link rel="import" href="paper-icon-button/paper-icon-button.html">_x000D_
  <link rel="import" href="paper-menu/paper-menu.html">_x000D_
  <link rel="import" href="paper-material/paper-material.html">_x000D_
  <link rel="import" href="paper-item/paper-item.html">_x000D_
  <link rel="import" href="iron-selector/iron-selector.html">_x000D_
  <link rel="import" href="iron-pages/iron-pages.html">_x000D_
  <link rel="import" href="platinum-sw/platinum-sw-register.html">_x000D_
  <link rel="import" href="platinum-sw/platinum-sw-cache.html">_x000D_
  <link rel="import" href="paper-toast/paper-toast.html">_x000D_
  <link rel="import" href="paper-filter/paper-filter.html">_x000D_
  <link rel="import" href="firebase-element/firebase-document.html">_x000D_
  <link rel="import" href="firebase-element/firebase-collection.html">_x000D_
  <link rel="import" href="iron-input/iron-input.html">_x000D_
_x000D_
</head>_x000D_
_x000D_
<body>_x000D_
  <template is="dom-bind" id="app">_x000D_
    <my-list></my-list>_x000D_
  </template>_x000D_
  <dom-module id="my-list">_x000D_
    <style>_x000D_
      :host {_x000D_
        display: block;_x000D_
      }_x000D_
      paper-material {_x000D_
        margin: 16px, 16px;_x000D_
        height: 100px;_x000D_
        width: 200px;_x000D_
        padding: 16px 0px 16px 0px;_x000D_
      }_x000D_
        paper-button {_x000D_
    background: #fff;_x000D_
    min-width: 172px;_x000D_
    margin: 0px 2px 6px;_x000D_
  }_x000D_
  .mini-badge {_x000D_
    display: inline-block;_x000D_
    min-width: 10px;_x000D_
    padding: 3px 7px;_x000D_
    font-size: 12px;_x000D_
    font-weight: 100;_x000D_
    color: #FFF;_x000D_
    line-height: 1.2;_x000D_
    vertical-align: baseline;   _x000D_
    background-color: #6F6F6F;_x000D_
    border-radius: 10px;_x000D_
  }_x000D_
    </style>_x000D_
    <template>_x000D_
      <firebase-collection location="https://hi9.firebaseio.com/cards/data/card" data="{{cards}}">_x000D_
      </firebase-collection>_x000D_
      _x000D_
      <template is="dom-repeat" items="{{filters}}" as="x" observe="obj_filters">_x000D_
        <paper-button raised$="{{!x.filtered}}" on-tap="setFilter" filter="type" title="{{x.name}}">_x000D_
          <span>{{x.name}}</span> <span class="mini-badge">{{x.num}}</span>_x000D_
        </paper-button>_x000D_
      </template>_x000D_
      <template is="dom-repeat" items="{{cards}}" filter="filter_cards"  observe="refilter obj_filters.type filters" as="card">_x000D_
        <paper-material>_x000D_
          <span class="paper-font-body1">{{card.value}}</span>_x000D_
       <!-- <img src="{{card.image}}" width="100px" /> -->_x000D_
        </paper-material>_x000D_
      </template>_x000D_
    </template>_x000D_
    <script>_x000D_
      _x000D_
(function() {_x000D_
  Polymer({_x000D_
    is: 'my-list',_x000D_
    properties: {_x000D_
      filters: {_x000D_
        type: Array_x000D_
      },_x000D_
      refilter:Boolean,_x000D_
      obj_filters: {_x000D_
        type: Object,_x000D_
        value: {}_x000D_
      },_x000D_
      output: {_x000D_
        type: Array,_x000D_
        notify: true_x000D_
      },_x000D_
      cards: {_x000D_
        type: Array,_x000D_
        notify: true_x000D_
      }_x000D_
    },_x000D_
    observers: ['outputChanged(cards.* )'],_x000D_
    outputChanged: function(stuff) {_x000D_
      this.filters = this.justProperties(this.cards, "type");_x000D_
    },_x000D_
    filter_cards: function(data) {_x000D_
      var types = this.obj_filters;_x000D_
      for (var key in types) {_x000D_
        if (types.hasOwnProperty(key)) {_x000D_
          var obj = types[key];_x000D_
          for (var prop in obj) {_x000D_
            if(obj.hasOwnProperty(prop)){_x000D_
              if (data.hasOwnProperty(key)) {_x000D_
                if (obj[prop]) {_x000D_
                  if (data[key].indexOf(prop) === -1 ) {_x000D_
                    return false;_x000D_
                  }_x000D_
                }_x000D_
              } else {_x000D_
                return false;_x000D_
              }_x000D_
            }_x000D_
          }_x000D_
        }_x000D_
      }_x000D_
      return true;_x000D_
    },_x000D_
    justProperties: function(data, properties) {_x000D_
      console.log('justProperties');_x000D_
      var output = [];_x000D_
      var outputNum = [];_x000D_
      if (data !== undefined && data !== null && Array.isArray(data) && data.length > 1) {_x000D_
        var test = function(entryA) {_x000D_
          if (output.indexOf(entryA) === -1) {_x000D_
            output.push(entryA);_x000D_
            outputNum.push(1);_x000D_
          } else {_x000D_
            outputNum[output.indexOf(entryA)]++;_x000D_
          }_x000D_
        };_x000D_
        for (var i = 0, l = data.length; i < l; i++) {_x000D_
          test(data[i][properties]);_x000D_
        }_x000D_
      }_x000D_
      var result = [];_x000D_
      for (var a = 0, x = output.length; a < x; a++) {_x000D_
        result[a] = {_x000D_
          name: output[a],_x000D_
          num: outputNum[a],_x000D_
          filtered: this.ifFiltered(output[a], properties)_x000D_
        };_x000D_
      }_x000D_
      result.sort(function(a, b) {_x000D_
        return b.num - a.num;_x000D_
      });_x000D_
      _x000D_
      console.log(result);_x000D_
      return result;_x000D_
    },_x000D_
    ifFiltered: function(name, properties) {_x000D_
      if (this.obj_filters.hasOwnProperty(properties)) {_x000D_
        if (this.obj_filters[properties].hasOwnProperty(name)) {_x000D_
          return this.obj_filters[properties][name];_x000D_
        } else {_x000D_
          return false;_x000D_
        }_x000D_
      } else {_x000D_
        return false;_x000D_
      }_x000D_
    },_x000D_
    justOfTypes: function(data){ console.log('justOfTypes');_x000D_
      if (value === null) {_x000D_
        return null;_x000D_
      }_x000D_
      if (isEmpty(types)) {_x000D_
        return value;_x000D_
      } else {_x000D_
        var output = [];_x000D_
        value.forEach(function(entry) {_x000D_
          if (hasTypes(data[entry],types)) {_x000D_
            output.push(entry); _x000D_
          }_x000D_
        });_x000D_
        return output;_x000D_
      }_x000D_
    },_x000D_
    setFilter: function(e) {_x000D_
      var filter = e.currentTarget.getAttribute('filter');_x000D_
      var title  = e.currentTarget.getAttribute('title');_x000D_
_x000D_
      if (this.obj_filters.hasOwnProperty(filter)) {_x000D_
        if (this.obj_filters[filter].hasOwnProperty(title)) {_x000D_
          delete this.obj_filters[filter][title];_x000D_
        } else {_x000D_
          this.set("obj_filters."+filter+'.'+title , true);_x000D_
        }_x000D_
      } else {_x000D_
        if (this.obj_filters === undefined) {_x000D_
          this.obj_filters = {};_x000D_
        }_x000D_
        this.obj_filters[filter] = {};_x000D_
        this.set("obj_filters." + filter+'.'+title , true);_x000D_
      }_x000D_
      this.set("filters", this.justProperties(this.cards, "type"));_x000D_
      this.set("refilter", !this.refilter);_x000D_
      console.log(this.obj_filters);_x000D_
    }_x000D_
  });_x000D_
})();_x000D_
_x000D_
    </script>_x000D_
  </dom-module>_x000D_
_x000D_
</body>_x000D_
</html>

_x000D_

_x000D_

_x000D_

Solution

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().

Answered By: Anonymous

Related Articles

Disclaimer: This content is shared under creative common license cc-by-sa 3.0. It is generated from StackExchange Website Network.

Leave a Reply

Your email address will not be published. Required fields are marked *