Polymer 1.0 observe not firing for a filter
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.
<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
Disclaimer: This content is shared under creative common license cc-by-sa 3.0. It is generated from StackExchange Website Network.