2
Используя новое связывание данных Polymer, мы хотим использовать функцию наблюдения, чтобы знать, когда фильтр срабатывает при нажатии кнопки. Заголовки кнопок динамичны, поскольку они втягиваются из Firebase, и мы успешно используем getAtribute. Но мы не можем заставить фильтр срабатывать. Мы поставили наблюдение в повторение dom, но ничего не происходит. Надеюсь, кто-то может помочь.Polymer 1.0 не наблюдают обжига для фильтра
<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>