我有自定义元素中的自定义元素,我想要一个子元素来影响父属的属性.我采取的方法是创建一个点击处理程序,关闭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>
原文地址:https://www.jb51.cc/js/155423.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。