javascript – 获取聚合物母体元素

所以我一直在使用聚合物大约一天,我在麻烦这个问题,所以如果我的方法是脱离基地,请不要觉得需要解决这个问题,而是指向正确的方向.

我有自定义元素中的自定义元素,我想要一个子元素来影响父属的属性.我采取的方法是创建一个点击处理程序,关闭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>