所以我现在已经使用Polymer大约一天了,而且我在填写这个问题上遇到了麻烦,所以如果我的方法偏离基础,请不要觉得有必要解决这个问题。而是指出我正确的方向。
我所拥有的是自定义元素中的自定义元素,我希望子元素能够影响父元素的属性。我采用的方法是创建一个单击处理程序,关闭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和shadowRoots以找到我正在寻找的父母。
修改
我忘了提及它在IE中是如何失败的,以及为什么我要避免使用parentNode调用。在IE中,当它专门发送事件聚合物.js的第9131行时,变量&#34;方法&#34;并且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);
}
});
孩子必须通过查询选择器来获取它,例如父母元素&#39;并且知道名字&#39; superHandler&#39; (不是实际名称)
Polymer('child-element',{
clickHandler: function(){
var p = document.querySelector('parent-element').superHandler;
p(this);
}
});
更好的想法?
答案 0 :(得分:16)
您可以使用自己的事件在元素之间传递数据。
父组件:
<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>
答案 1 :(得分:3)
这是一种在Javascript中访问父元素的简单方法。这适用于a personal work(聚合物0.5 - 如评论中所述,1.0中的情况不同)。没有在IE上测试过,但在我看来这是一个简单的解决方案:
Polymer('sub-element', {
ready: function(){
this.parentNode;
}
});
答案 2 :(得分:1)
感谢您提供自定义活动建议。这让我回过头来再次查看核心元素,找到this。
然后我只需要添加一个
<core-signals on-core-signal-my-event="{{myEventHandler}}"></core-signals>
使用名称(在此示例中)“my-event”触发“core-signal”事件,并在父节点上创建方法“myEventHandler”。
Polymer({
myEventHandler: function(e,detail,sender) {...}
})
答案 3 :(得分:0)
由于组件的性质,我对以这种方式访问parentNode犹豫不决。如果你需要样式,你可以使用:host()
css规则。恕我直言,除非你有充分的理由,否则伸出父元素似乎很蠢。为什么不使用自定义事件或localStorage
等中间商店?
另请查看"The 'Gold Standard' Checklist for Web Components"以获取有关最佳做法的其他帮助。