获取聚合物 parent 元素

Question

所以我已经使用 Polymer 大约一天了，我在表达这个问题时遇到了问题，所以如果我的方法偏离了基础，请不要觉得有必要解决这个问题，而是指出我方向正确。

我拥有的是自定义元素中的自定义元素，我想要一个 child 元素来影响 parent 的属性。我采用的方法是创建一个点击处理程序，关闭 IIFE 中的 parent 元素，然后将该处理程序传递给子组件。像这样...

Polymer({
  ready: function(){
     this.superHandler = (function(p) {
        return function() {
          // "this" here will be the sub-component
          p.title = this.title;
        }
     })(this);
  }
});

parent 元素在其模板中使用它的地方，例如...

<polymer-element name="parent-element">
  <template>
    <sub-element on-click={{superHandler}} />
  </template>
</polymer-element>

这个（在我的真实代码中，虽然这里可能有拼写错误）在除 IE 之外的所有软件中都有效，我知道 IE 没有得到官方支持，但它是如此接近我不想放弃它。我想避免的事情是重复引用 parentNodes 和 shadowRoots 以获得我正在寻找的 parent。

编辑

我忘了提及它在 IE 中是如何失败的，以及为什么我想避免 parentNode 调用。在IE中，具体到polymer.js的第9131行去派发事件时，变量"method"和obj[method]中的引用在IE中都是字符串，所以没有method apply。我想避免 parentNode 的原因是因为调用者不是直接的 parent，所以我不想在找到合适的节点之前一直获取 parentNodes，因为当我可以命名变量时代码更容易理解。

编辑 2

我现在要做什么（因为它在 IE9 中工作），尽管我将问题悬而未决以获得更好的答案是继续使用 IIFE，返回一个函数，该函数接受一个参数，即 child。然后 child 将通过 querySelector 找到感兴趣的 parent。这意味着 child 必须具有 parent 的 fore-knowledge 和要调用的方法，这并不理想，但是... IE.

因此 parent 将其设置为...

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

并且 child 必须通过查询选择器获取它，比如通过 'parent-element' 并且知道名称 'superHandler'（不是实际名称）

Polymer('child-element',{
        clickHandler: function(){
            var p = document.querySelector('parent-element').superHandler;
            p(this);
        }
    });

更好的主意？

Answer 1

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

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

Answer 2

由于组件的性质，我对以这种方式访问parentNode犹豫不决。如果您需要样式，可以使用 :host() css 规则在没有它的情况下完成。恕我直言，除非你有充分的理由，否则接触父元素似乎很麻烦。为什么不使用自定义事件或像 localStorage 这样的中介商店？

另请查看 "The 'Gold Standard' Checklist for Web Components" 以获得有关最佳实践的更多帮助。

Answer 3

您可以使用自己的事件在元素之间传递数据。

父组件：

<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>

Answer 4

感谢您提供自定义事件建议。这让我回去再次查看核心元素以找到 this.

那我只需要加一个

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

触发名称为（在此示例中）"my-event" 的 "core-signal" 事件，并在父级上创建方法 "myEventHandler"，例如

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

获取聚合物 parent 元素

Get polymer parent element

javascript

polymer