获得聚合物父元素

Question

所以我现在一直在使用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行时，变量“方法”和obj [方法]中的引用是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);
        }
    });

好主意？

Answer 1

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

父组件：

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

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

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

Answer 3

感谢您提供自定义活动建议。 这让我回过头来看看核心元素再找到它 。

然后我只需要添加一个

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

触发“核心信号”事件，其名称为（在此示例中）为“my-event”，并在父项上创建方法“myEventHandler”，例如

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

Answer 4

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

另请查看“Web组件的'黄金标准'核对表”，以获取有关最佳实践的其他帮助。