javascript - 如何在 Polymer 1.0 中绑定(bind)对象数组？

Question

我有一个菜单，它使用iron-ajax调用页面的内容，该内容是一个具有请求的 polymer 元素的html文件，效果很好。我遇到的问题是根据请求的内容更改纸张工具栏中的图标。它在 polymer 0.5 中工作正常，但在 polymer 1.0 中不起作用。

这是我的 dom-repeat 将图标放入 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>

这是我观察突变的函数，我没有做这个函数，所以我不能完全理解这个函数的作用。

       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 });
                }

因此，当我调用某些内容时，第一次更改上下文按钮，但其他时候什么也没有发生，我使用

检查数组

$0.contextualButtons

数组按照我的预期发生了变化，即使我将额外的对象插入数组，但 dom 没有改变

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

我的数组的声明是这样的:

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

                }

我尝试使用observer、reflectToAttribute和notify，但它不起作用，也许我不能完全理解它是如何工作的。

有人可以帮助我吗？顺便说一句，对不起我的英语。谢谢!

Answer 1

过了一段时间，我找到了我的问题的答案，这个问题已经用你能想象到的最简单的方法解决了，是的，创建一个新的自定义元素。所以这是我的元素，以防万一有人需要这样的东西。

<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>