获取聚合物母元素

Get polymer parent element

本文关键字：元素 聚合物 获取      更新时间：2023-09-26

所以我已经使用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行的事件时，变量"method"和obj[method]中的引用是IE中的字符串，因此没有方法适用。 我想避免使用parentNode的原因是因为调用者不是直接父节点，所以我不想在找到正确的父节点之前继续获取parentNodes，因为当我可以命名变量时，代码更容易理解。

编辑 2

我现在要做的（因为它在IE9中工作），尽管我保留了更好的答案的问题，即继续使用IIFE，返回一个接受子参数的函数。 然后子项将通过查询选择器找到感兴趣的父项。 这意味着孩子必须预先了解父母和呼叫方法，这并不理想，但是......即。

所以家长将其设置为...

Polymer('parent-element', {
  ready: function(){
     this.superHandler = (function(p) {
        return function(child) {
          p.title = chile.title;
        }
     })(this);
  }
});

孩子必须通过查询选择器获取它，比如通过"父元素"并知道名称"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>

这是访问 Javascript 中父元素的简单方法。这适用于个人作品（聚合物 0.5 - 如评论中所述，1.0 中的情况有所不同）。未在IE上测试，但在我看来，这是一个简单的解决方案：

Polymer('sub-element', {
  ready: function(){
     this.parentNode;
  }
});

感谢您的自定义事件建议。 这让我回过头来再次查看核心元素以找到这一点。

然后我只需要添加一个 

<core-signals on-core-signal-my-event="{{myEventHandler}}"></core-signals>

触发一个名称为（在本例中）为"my-event"的"核心信号"事件，并在父级上创建一个方法"myEventHandler"，例如

Polymer({
  myEventHandler: function(e,detail,sender) {...}
})

由于组件的性质，我对以这种方式访问 parentNode 犹豫不决。如果您需要样式，则可以使用:host() css规则来使用它。恕我直言，除非您有充分的理由，否则联系父元素似乎很恶心。为什么不使用自定义事件或中间商店，如localStorage？

另请查看"Web 组件的'黄金标准'清单"，以获取有关最佳实践的其他帮助。

相关文章：