demo helpers polymer (if and repeat)

helpers-polymer

<dom-module id="foo-component">
    
    <template>
        <h3>Frutas</h3> 
        <template id="templateFruits" is="dom-repeat" filter="filterFruits" items="{{fruits}}" sort="orderFruits">
           <template is="dom-if" if="{{item.color}}">
                <p>La fruta {{index}} es {{item.name}}
                y es de color {{item.color}} <br>
                <button on-tap="setFavorite">favorita</button></p>
            </template>
        </template>
        Mi favorita es: {{fruitFavorite}}
        <p><button on-tap="addFruit">añadir</button> </p>
    </template>
    
    <script>
    
        Polymer({
            is: 'foo-component', 

            properties: {
                fruits: {
                    type: Array,
                    value: [
                        {'name': 'cerezas', 'color': 'rojo'},
                        {'name': 'mandarinas', 'color': 'naranja'},
                        {'name': 'fresas', 'color': 'rojo'},
                        {'name': 'peras', 'color': 'verde'},
                        {'name': 'kiwis', 'color': ''}
                    ]
                    /* value: [] */
                },
                fruitFavorite: {
                    type: String,
                    value: "ninguna"
                }
            },

            filterFruits: function(item) {
                if ( item.color == 'rojo' || item.color == 'amarillo' ) {
                    return true;
                }
                return false;
            },
            
            orderFruits: function(a, b) {
                return a.name < b.name ? -1 : 1;
            },
            
            setFavorite: function(e) {                
                var fruit = e.model.item;
                this.fruitFavorite = fruit.name;
                /* use console.log to understand what is polymer model ; ) */
                console.log('e', e.model);
            },
            
            addFruit: function() {
                this.push('fruits', {'name': 'piña', 'color': 'amarillo'});
            }

        });
        
    </script> 

</dom-module>

Una explicación detallada en the bit jazz band