聚合物Javascript。无法在点击事件时将数据传递给其他聚合物元素而不调用聚合物元素

Question

我有两个聚合物元素：<element-a> <element-b>它们都是父元素中的子元素<element-c>，并且每个都在不同的文件中。

在 <element-a> 中，我有一个 <paper-listbox>，里面有一些 <paper-item> 有点击事件来获取它的值。

目标是：在 <element-b> 方面，我想从 API 和 url 中获取 GET，如下所示：

api/configs/{{tempId}}

并在触发 <element-a> 的点击事件的 <paper-listbox> 时将其调用到 <element-b> 中的 <p>。 {{tempId}} 是 <element-a> 侧所选 <paper-listbox> 的值。

我已经得到选定的 <paper-listbox> 值，我尝试将其打印在控制台上，但不知道如何在不调用元素的情况下将其传递给 <element-b>。已经尝试过一些方法，例如使用会话存储为 {{tempId}} 设置临时值，但不知道何时在 <element-b> 端调用它。尝试从 'ready: function' 调用它，我知道没有用。我只是试了一下以确保。

下面是一些示例代码

// element-a.html
    ...
    <paper-listbox selected="0">
        <template is="dom-repeat" items="{{response.data}}">
          <paper-item value="{{item.id}}" on-tap="_getId">
            Configuration ID {{item.id}}
          </paper-item>
        </template>
      </paper-listbox>

<script>
...
_getId: function(e) {
  var tempId = e.path[0].value;
  console.log(e.path[0].value);
}
...
</script>

然后

//element-b.html
<iron-ajax
  ...
  url="api/configs/{{tempId}}"
  ...
  >

非常感谢您的帮助。谢谢。

Answer 1

如果属性在父元素中，那么您可以像这样在子元素中使用它

<element-b temp-id=[[tempId]]></element-b>

但在你的情况下，你可以在你的父元素中有一个监听器

listeners: {
 'on-tap-listener': '_abc'
}

并在 <element-a> 中像这样触发事件

_getId: function(e) {
  var tempId = e.path[0].value;
  console.log(e.path[0].value);
  this.fire('on-tap-listener',tempId);
}

现在您的父元素中有了您的 tempId，并将其分配给属性并将其绑定到 element-b，如上所示

_abc:function(data){
   this.tempId = data.detail.tempId;
},

聚合物Javascript。无法在点击事件时将数据传递给其他聚合物元素而不调用聚合物元素

Polymer Javascript. couldn't pass data when on-tap event, to other polymer-element without calling the polymer-element

javascript

listbox

polymer