Question

我正在开发一个Polymer项目，并且我嵌套了一些自定义元素。例如，我有一个名为<example-main>的自定义元素。假设此元素具有名为displayMessage()

的函数

我在<example-main>内定义了另一个名为<example-alerts>的自定义元素。我希望alerts元素能够在其parent，main中使用该函数来显示消息。

为实现这一目标，我尝试使用Polymer的Automatic Node Finding哈希<example-main id='mainEl'>并使用如下函数选择元素this.$.mainEl：this.$.mainEl.displayMessage();

但是，我收到此错误消息：

Uncaught TypeError: Cannot read property 'displayMessage' of undefined

我是否采用了在其他Polymer对象中使用Polymer元素调用函数的错误方法？

为了更好地展示事物，the index.html看起来像是：

...

<body>
  <example-main id='mainEl'></example-main>
</body>

...

虽然example-main.html看起来像：

<polymer-element name='example-main'>
<template>
  ...

  <example-alerts>
</template>
<script>
  Polymer(example-element, {
    displayMessage: function(){
        //do message showing magic
    }
  });
</script>
</polymer-element>

最后，example-alerts.html看起来像：

<polymer-element name='example-alerts'>
<template>
  ...
    <paper-button on-tap='{{callFunction}}'></button>

</template>
<script>
  Polymer(example-alerts, {
    callFunction: function(){
        //call the function in parent
        this.$.mainEl.displayMessage();
    }
  });
</script>
</polymer-element>

Answer 1

你没有这样做，你不能用这种方式找到节点。节点查找只搜索元素最外层模板中定义的同一元素。

您应该更改您的方法，或者您可以使用事件来处理这种情况请参阅可以为您工作的示例演示。

<polymer-element name='example-alerts'>
<template>
  ...
    <paper-button on-tap='{{callFunction}}'></button>

</template>
<script>
  Polymer(example-alerts, {
    callFunction: function(){
        //call the function in parent
 this.fire('ouch', {msg: 'That hurt!'}); 
    }
  });
</script>
</polymer-element>


--Second Element

<polymer-element name='example-main'>
<template>
  ...

  <example-alerts on-ouch='{{displayMessage}}'>
</template>
<script>
  Polymer(example-element, {
    displayMessage: function(){
        //do message showing magic
    }
  });
</script>
</polymer-element>

我可以使用Polymer的自动节点查找选择文档中的任何元素吗？

1 个答案: