如何在 Polymer 1.0 中绑定对象数组？

Question

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

这是我的 dom-重复将图标放入 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 });
                }

所以，当我调用一些内容时，第一次更改上下文按钮，但其他时候没有任何反应，我使用

检查数组

[=12=].contextualButtons

并且数组如我所料发生变化，即使我将额外的对象放入数组中，但 dom 没有变化

[=13=].contextualButtons.push({ icon: 'social:person-addss', action: 'new' })

我的数组声明是这样的：

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

                }

我尝试使用观察者、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>

如何在 Polymer 1.0 中绑定对象数组？

How to bind an array of objects in Polymer 1.0?

javascript

polymer