Question

我有一个菜单用铁-ajax调用页面的内容，这个内容是一个html文件谁有请求的聚合物元素，这工作正常。我遇到的问题是根据请求的内容更改纸质工具栏中的图标。它在聚合物0.5中工作正常，但在聚合物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并通知但它不起作用，也许我无法完全理解它是如何工作的。

任何人都可以帮助我吗？顺便说一句，抱歉我的英语。 Thaks！

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中的对象数组？

1 个答案: