Question

请考虑以下示例：

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/polymer/0.5.5/polymer.js"></script>
<polymer-element name="my-outer" >
  <template>
      outer
     <my-inner id="inner" >
         <button on-click="{{buttonClick}}">push</button>
     </my-inner>
      outer
  </template>
  <script>
    Polymer('my-outer', {
      buttonClick: function(){
          
          // it wasn't commented before update
          //this.$.inner.buttonClick();
      }
    });
  </script>
</polymer-element>

<polymer-element name="my-inner">
  <template>
      <content></content>
  </template>
  <script>
    Polymer('my-inner', {
      // update 
       domReady: function() {
        this.eventController = this;
       },
      //end update
      
       buttonClick: function(){
          alert('inner');
      }
    });
  </script>
</polymer-element>

<my-outer></my-outer>

＆＃13;

问题是，是否有任何方法可以调用Inner的buttonClick而不在外部显式委托（将$ .inner ...放入点击也不起作用）？也许与bind或其他东西。

最好的反叛，尤金。

ps：该代码段仅适用于Chrome。不确定它是聚合物还是堆栈溢流。

更新：看起来像放

 domReady: function() {
        this.eventController = this;
 },

进入内部组件解决了问题。但我仍然没有完全理解eventController是什么。当事件处理程序正在查找它时，它只是迭代通过节点父节点并选择任何已定义的eventController，如果没有找到，则使用node.host。在聚合物代码中弹出eventController的唯一另一个地方是一些带有模糊注释的lightFromTemplate函数和TODO。然后还有bug https://github.com/Polymer/polymer/issues/1170和几个帖子不能让我明白这个问题。

所以更新的问题是：什么是聚合物的eventController，有什么方法可以使用吗？

Answer 1

可以使用数据绑定，但这种解决方案并不优雅。我更喜欢你最初的解决方案。

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/polymer/0.5.5/polymer.js"></script>
<polymer-element name="my-outer">
  <template>
      outer
     <my-inner id="inner" clicked="{{clicked}}">
         <button on-tap="{{click}}">push</button>
     </my-inner>
      outer
  </template>
  <script>
    Polymer({
      clicked: false,
      click: function() {
        this.clicked = !this.clicked;
      }
    });
  </script>
</polymer-element>

<polymer-element name="my-inner">
  <template>
      <content></content>
  </template>
  <script>
    Polymer('my-inner', {
       publish: {
         clicked: {
           value: false,
           reflect: true
         }
       },
       clickedChanged: function() {
         alert('inner');
       }
    });
  </script>
</polymer-element>

<my-outer></my-outer>

＆＃13;

如何调用直接父元素函数

1 个答案: