[英]How to bind an array of objects in Polymer 1.0?
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. 我有一个菜单,该菜单使用Iron-ajax调用页面的内容,此内容是具有聚合物元素要求的html文件,这可以正常工作。 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.
它在聚合物0.5中工作正常,但在聚合物1.0中不起作用。
Here is my dom-repeat to put icons in dom 这是我在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>
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 并且阵列发生了预期的变化,即使我将多余的对象推入阵列,但dom并没有改变
$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. 我尝试使用观察器,reflectToAttribute并进行通知,但是它不起作用,也许我无法完全理解它是如何工作的。
Anyone can help me? 有人可以帮助我吗? By the way, sorry for my english.
顺便说一句,对不起我的英语。 Thaks!
Thaks!
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.