所以我一直在使用聚合物大约一天,我在麻烦这个问题,所以如果我的方法是脱离基地,请不要觉得需要解决这个问题,而是指向正确的方向.
我有自定义元素中的自定义元素,我想要一个子元素来影响父属的属性.我采取的方法是创建一个点击处理程序,关闭IIFE中的父元素,然后将该处理程序传递给子组件.像这样…
Polymer({
ready: function(){
this.superHandler = (function(p) {
return function() {
// "this" here will be the sub-component
p.title = this.title;
}
})(this);
}
});
父元素在其模板中使用它,如…
<polymer-element name="parent-element">
<template>
<sub-element on-click={{superHandler}} />
</template>
</polymer-element>
这个(在我的真实代码中,尽管可能在这里有打字错误)适用于除IE之外的所有内容,我知道IE不是官方支持的,但是我不想放弃它.我想避免的事情是重复引用parentNodes和shadowRoot来获取我正在寻找的父项.
编辑
我忘了提到它是如何在IE中失败的,为什么我想避免parentNode调用.在IE中,当专门针对clust.js发送9131行的事件时,变量“method”和obj [method]中的引用是IE中的字符串,因此没有方法适用.我想避免parentNode的原因是因为调用者不是直接的父代,所以我不想继续获取parentNodes,直到找到正确的父节点,因为当我可以命名变量时,代码更容易理解.
编辑2
我现在要做什么(因为它在IE9中工作),尽管我离开这个问题打开一个更好的答案是继续IIFE,返回一个函数,该参数是一个孩子.然后孩子将通过querySelector找到感兴趣的父母.这意味着孩子必须有父母的知识和调用的方法,这不是理想的,而是… IE.
所以父母把它设置为…
Polymer('parent-element',{
ready: function(){
this.superHandler = (function(p) {
return function(child) {
p.title = chile.title;
}
})(this);
}
});
而孩子必须通过查询选择器来获取它,比如’parent-element’,并且知道’superHandler'(而不是实际名称)
Polymer('child-element',{
clickHandler: function(){
var p = document.querySelector('parent-element').superHandler;
p(this);
}
});
更好的想法？
解决方法
您可以使用自己的事件在元素之间传递数据.
父组件：
<polymer-element name="parent-element">
<template>
<!-- ... -->
<sub-element></sub-element>
</template>
<script>
Polymer({
ready: function() {
this.addEventListener('eventFromChild',this.myAction);
},myAction: function(event) {
console.log(event.detail);
},});
</script>
子组件：
<polymer-element name="sub-element" attributes="foo bar">
<template>
<!-- ... -->
<button on-click="{{passParams}}">Send</button>
</template>
<script>
Polymer({
ready: function() {
this.foo = 'abc';
this.bar = '123';
},passParams: function() {
this.fire('eventFromChild',{ foo: this.foo,bar: this.bar });
},});
</script>
