javascript 获取聚合物父元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28978843/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Get polymer parent element
提问by Felix
So I've been using Polymer for about a day now and I'm having trouble phrasing this question, so if my approach is way off base, please don't feel the need to fix this, rather point me in the right direction.
所以我现在已经使用 Polymer 大约一天了，我在表述这个问题时遇到了麻烦，所以如果我的方法离基础很远，请不要觉得有必要解决这个问题，而是指出我正确的方向。
What I have are custom elements within custom elements and I would like a child element to affect the parent's attributes. The approach I'm taking is to create a click handler, closing the parent element in an IIFE, then passing that handler to the sub component. Like so...
我拥有的是自定义元素中的自定义元素，我希望子元素影响父元素的属性。我采用的方法是创建一个单击处理程序，关闭 IIFE 中的父元素，然后将该处理程序传递给子组件。像这样...
Polymer({
ready: function(){
this.superHandler = (function(p) {
return function() {
// "this" here will be the sub-component
p.title = this.title;
}
})(this);
}
});
Where the parent element uses it in it's template like...
父元素在它的模板中使用它的地方，如......
<polymer-element name="parent-element">
<template>
<sub-element on-click={{superHandler}} />
</template>
</polymer-element>
This (in my real code, though it's possible there's typos here) works in everything but IE, and I know IE isn't officially supported, but it's so close I don't want to give up on it. Things I want to avoid are repeated references to parentNodes and shadowRoots to get to the parent I'm looking for.
这（在我的真实代码中，虽然这里可能有错别字）适用于除 IE 之外的所有内容，我知道 IE 不受官方支持，但它是如此接近我不想放弃它。我想避免的事情是重复引用 parentNodes 和 shadowRoots 以到达我正在寻找的父节点。
Edit
编辑
I forgot to mention how it's failing in IE, and why I want to avoid the parentNode call. In IE, when it goes to dispatch the event specifically line 9131 of polymer.js, the variable "method" and the reference in obj[method] are strings in IE, and so have no method apply. The reason I want to avoid the parentNode is because the caller isn't the direct parent, so I don't want to keep getting parentNodes until I find the right one, since the code is much more understandable when I can name the variable.
我忘了提及它是如何在 IE 中失败的，以及为什么我想避免 parentNode 调用。在IE中，当它专门去派发聚合物.js的9131行事件时，变量“method”和obj[method]中的引用是IE中的字符串，因此没有方法适用。我想避免使用 parentNode 的原因是因为调用者不是直接父节点，所以我不想继续获取 parentNode，直到找到正确的父节点，因为当我可以命名变量时，代码更容易理解。
Edit 2
编辑 2
What I'm going with now (since it's working in IE9), though I'm leaving the question open for a better answer is to continue with the IIFE, returning a function that takes an argument that is the child. Then the child will find the parent of interest by a querySelector. This means the child has to have fore-knowledge of the parent and the method to call, which isn't ideal, but... IE.
我现在要做什么（因为它在 IE9 中工作），尽管我让问题悬而未决以获得更好的答案是继续使用 IIFE，返回一个接受子参数的函数。然后孩子将通过 querySelector 找到感兴趣的父母。这意味着孩子必须预先了解父母和调用的方法，这并不理想，但是...... IE。
So the parent sets it up as...
所以父级将其设置为...
Polymer('parent-element', {
ready: function(){
this.superHandler = (function(p) {
return function(child) {
p.title = chile.title;
}
})(this);
}
});
And the child must get it by a query selector, say by 'parent-element' and know the name 'superHandler' (not the actual name)
并且孩子必须通过查询选择器获取它，例如“父元素”并知道名称“superHandler”（不是实际名称）
Polymer('child-element',{
clickHandler: function(){
var p = document.querySelector('parent-element').superHandler;
p(this);
}
});
Better ideas?
更好的想法？
采纳答案by Felix
Thanks for the custom event suggestions. That got me to go back and look at the core elements again to find this.
感谢您的自定义事件建议。这让我回过头来再次查看核心元素以找到这个。
Then I just need to add a
然后我只需要添加一个
<core-signals on-core-signal-my-event="{{myEventHandler}}"></core-signals>
Fire off a "core-signal" event with a name of (in this example) "my-event" and create a method "myEventHandler" on the parent e.g.
触发名称为（在本例中）“my-event”的“core-signal”事件，并在父级上创建一个方法“myEventHandler”，例如
Polymer({
myEventHandler: function(e,detail,sender) {...}
})
回答by Max Zuber
You can use own events to pass data between elements.
您可以使用自己的事件在元素之间传递数据。
Parent component:
父组件：
<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>
Child component:
子组件：
<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>
回答by bdulac
Here is a simple way to get access to the parent element in Javascript. This works in a personal work(polymer 0.5 - as mentioned in the comments, things are different in 1.0). Not tested on IE, but it seems to me a simple solution:
这是一种在 Javascript 中访问父元素的简单方法。这适用于个人作品（聚合物 0.5 - 如评论中所述，1.0 中的情况有所不同）。未在 IE 上测试，但在我看来这是一个简单的解决方案：
Polymer('sub-element', {
ready: function(){
this.parentNode;
}
});
回答by Erik Isaksen
Due to the nature of a component, I'm hesitant to access the parentNode in this way. If you need styling you can do without it by using the :host()css rules. IMHO, it seems icky to reach out to the parent element unless you have a good reason. Why not use a custom event or an intermediary store like localStorage?
由于组件的性质，我对以这种方式访问 parentNode 犹豫不决。如果您需要样式，则可以通过使用:host()css 规则来实现。恕我直言，除非您有充分的理由，否则联系父元素似乎很麻烦。为什么不使用自定义事件或中间商店localStorage？
Also check out "The 'Gold Standard' Checklist for Web Components"for additional help on best practices.
另请查看“Web 组件的‘黄金标准’清单”以获得有关最佳实践的更多帮助。
