How to bind an array of objects in Polymer 1.0?

Question

I have a menu who calls with iron-ajax the content of the page, this content is an html file who has the polymer element requested, this works fine. The problem I have is to change icons in the paper-toolbar depending of the content requested. It works fine in polymer 0.5, but in polymer 1.0 doesn't work.

Here is my dom-repeat to put icons in dom

<template is="dom-repeat" items="{{content.contextualButtons}}" as="button" id="repiteBotones">
   <paper-icon-button contextual-action="{{button.action}}" icon="{{button.icon}}" on-tap="{{onContextualButtonTap}}"></paper-icon-button>
</template>

This is my function to observer mutations, I didn't do this function, so I can't fully understand what this function does.

       attached: function () {
                   var self = this;
                   this.mo = new MutationObserver(function (mutations) {
                        mutations.forEach(function (m) {
                            for (i = 0; i < m.removedNodes.length; i++) {
                                self.content = null;
                            }
                            for (i = 0; i < m.addedNodes.length; i++) {
                                self.content = m.addedNodes[i];
                            }
                        });
                   }.bind(this));
                    this.mo.observe(this.$.content, { childList: true });
                }

So, when I call some content, first time changes the contextual buttons, but other times nothing happened, I checked the array using

$0.contextualButtons

and the array changes as I expected, even I push extra objects into the array, but dom does not changes

$0.contextualButtons.push({ icon: 'social:person-addss', action: 'new' })

The declaration of my array is like this:

contextualButtons: {
                    type: Array,
                    value: function () { return []; },
                    observer: '_contextualButtonsChange'
                    //reflectToAttribute: true,
                    //notify: true

                }

I tried to use observer, reflectToAttribute and notify but it not works, maybe I cant fully understand how it works.

Anyone can help me? By the way, sorry for my english. Thaks!

Answer 1

After sometime, I found the response of my question, this problem was resolved the most easy way you can imagine, yes, creating a new custom element. So here is my element just in case someone needs something like this.

<script>
    Polymer({
        is: 'my-toolbar-icons',
        properties: {
            contextualButtons: {
                type: Array,
                value: function () {
                    return [];
                }
            }
        },
        ready: function(){
            //set data just to show an icon
            this.contextualButtons = [{ icon: 'social:person-add', action: 'new' }, { icon: 'delete', action: 'delete' }, { icon: 'cloud-upload', action: 'update' }, { icon: 'image:camera-alt', action: 'takephoto' }, { icon: 'search', action: 'search' }];
        },
        setData: function (newContextualButtons) {
            //set data to the array (usage)
            //var item = document.querySelector("#id-of-this-element")
            //item.setData(someArrayOfIcons)
            this.contextualButtons = newContextualButtons;
        },
        onContextualButtonTap: function (event) {
            var item = this.$.buttonsRepeat.itemForElement(event.target);
            this.fire('customize-listener', item.action);
        }
    });
</script>