我有两个 polymer 元件:<element-a> <element-b>
它们都是父元素内的子元素 <element-c>
,并且每个都位于不同的文件中。
在 <element-a>
,我有一个<paper-listbox>
,里面有一些<paper-item>
在那里通过点击事件来获取它的值。
目标是:在 <element-b>
另一方面,我想从具有如下 url 的 API 获取:
api/configs/{{tempId}}
并将其调用为<p>
在<element-b>
当 <paper-listbox>
来自<element-a>
点击事件被触发。
{{tempId}} 是所选 <paper-listbox>
中的值来自<element-a>
侧面。
我已经选择了<paper-listbox>
我尝试将其打印在控制台上的值,但不知道如何将其传递给 <element-b>
而不调用该元素。已经尝试过某些方式,例如使用 session 存储为 {{tempId}} 设置临时值,但不知道何时在 <element-b>
上调用它边。尝试从“就绪:函数”调用它,我知道没有用。我只是尝试了一下以确保。
下面是一些示例代码
// 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}}"
...
>
非常感谢您的帮助。谢谢。
最佳答案
如果该属性位于父元素中,那么您可以在子元素中使用该属性,如下所示
<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 并将其分配给一个属性并将其绑定(bind)到 element-b
如上图
_abc:function(data){
this.tempId = data.detail.tempId;
},
关于javascript - polymer Javascript。在点击事件时无法将数据传递到其他 polymer 元素而不调用 polymer 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44064928/