javascript - polymer 自动节点查找不起作用

Question

我正在使用Polymer Web Components .

每当我使用 this.$ 时我收到一个错误，它未定义。我也尝试过 this.shadowRoot并且它声明它为空。

例如:

内部<polymer-element> :

<script>
    Polymer({
        cardClick: function(event, detail, sender) {
            this.$.ordertemplatediv.style.display = 'none';
               // the above line gives the following error:
               //   "Uncaught TypeError: Cannot read property 'style' of undefined"

            this.shadowRoot.querySelector('#ordertemplatediv').style.display = 'none';
               // the above line gives the following error:
               //   "Uncaught TypeError: Cannot read property 'style' of null"
        }
    });
</script>

在另一个里面<polymer-element>在另一个文件中:(为了清楚起见，省略了结束标签)

<template>
    <div id="ordertemplatediv">
        <template repeat="{{item in items}}">
            <!-- some irrelevant elements -->

两个文件的根元素都是<polymer-element> .

我尝试使用this.$在这个项目的不同情况下多次出现，但从未成功。有什么想法吗？

如有任何帮助，我们将不胜感激。

编辑 1 - 上下文

这就是我真正想做的:

我有 3 <polymer-elements>我们称之为<list-1> , <l-card>和<list-2> .

<list-1>看起来像这样:(为了清楚起见，省略了结束标签)

<polymer-element name="list-1">
    <template>
        <template repeat="{{post in posts}}">
            <l-card>

<l-card>包含<script>如上所述。

<list-2>包含<template>如上所述。

我想要<list-2>当 <l-card> 时刷新(数据重新加载)在<list-2>被点击(或点击)。

Answer 1

如果您要分隔 Polymer()调用 <polymer-element>它注册后，您需要传递元素的名称:

Polymer('your-element', {
   ...
}); 

否则，您需要输入 <template>里面<polymer-element>所以无名注册是有效的。