[英]Store returned values from the iron-ajax request in variables (Polymer)
I am working the first time with Polymers iron-ajax element and came across a problem which I believe is fairly simple to solve but I am unable to find a solution online.我第一次使用 Polymers iron-ajax 元素,遇到了一个我认为很容易解决的问题,但我无法在网上找到解决方案。
I retrieve user details with the iron-ajax element and loop through it with the dom-repeat.我使用 iron-ajax 元素检索用户详细信息,并使用 dom-repeat 循环遍历它。 The first and last name of a user are getting placed in a custom card element that I created to display users.用户的名字和姓氏被放置在我创建的用于显示用户的自定义卡片元素中。 Everything works fine except that I am unable to store the returned id value in a variable.一切正常,只是我无法将返回的 id 值存储在变量中。 I am sure this is possible with the usage of data binding but I couldn't get it to work.我确信使用数据绑定是可能的,但我无法让它工作。 And even when I try to get the value with getAttribute in my JavaScript it just returns null.即使当我尝试在我的 JavaScript 中使用 getAttribute 获取值时,它也只会返回 null。
In the code below my iron-ajax request & response can be found including my awkward attempt to get the id value {{item.id}}.To do so I created a on-tap function when a user clicks on one of the cards which then should get the value of the stdId attribute.在下面的代码中,可以找到我的 Iron-ajax 请求和响应,包括我尝试获取 id 值 {{item.id}} 的尴尬尝试。为此,当用户单击其中一张卡片时,我创建了一个 on-tap 函数然后应该获取 stdId 属性的值。
<dom-module id="my-students-view">
<template>
<style>
:host {
display: block;
}
</style>
<!-- Iron-Ajax created connection and gets data -->
<iron-ajax
auto
id="requestRepos"
url="http://api.dev/user/"
handle-as="json"
loading="{{isloading}}"
last-response="{{response}}"></iron-ajax>
<!-- dom-repeat iterates the response -->
<template is="dom-repeat" items="[[response.data]]" sort="sortData">
<student-card
id="studentCard"
to="http://localhost:8080/profile-view/{{item.id}}"
picsrc="../../images/anonymous.jpg"
name="{{item.first_name}} {{item.last_name}}"
stdId="{{item.id}}"
on-tap="sendId"></student-card>
</template>
</template>
<script>
Polymer({
is: 'my-students-view',
properties: {
stdId: {
notify: true,
}
},
//Sort the array/data alphabetically
sortData: function(a, b) {
if(a.first_name < b.first_name) return -1;
if(a.first_name > b.first_name) return 1;
return 0;
},
//Try to get the id value of a the student card
sendId: function() {
var idPropertie = this.$$("#studentCard");
var idValue = idPropertie.getAttribute('stdId');
console.log('the id is:' + idValue);
},
});
</script>
</dom-module>
Rewrite the sendId function:重写 sendId 函数:
sendId: function(event) {
var idValue = event.model.item.id;
console.log('the id is:' + idValue);
},
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.