「カード」要素のリストがあります。それぞれに用紙入力要素とボタン要素があります。各要素は、外部 JSON からいくつかのデータを取得します (my-post-service 要素には、core-ajax が埋め込まれています)。私の目標は、ユーザーがテキストボックスに何かを書き込んで相対ボタンをクリックすると、ユーザーが挿入した特定のカードとテキストの情報が別の関数に送信されることです。このポリマー要素のコードは次のとおりです。
<polymer-element name="template-list">
<template>
<my-post-service id="service" posts="{{posts}}" url="http://localhost:9111/v3/objects/templates">
</my-post-service>
<div id="pcId" layout horizontal wrap>
<template repeat="{{post in posts}}">
<my-post-card>
<img src="http://localhost:9111/v3/resources/{{post.representation[0].icon}}" width="70" height="70">
<h2>{{post.name}}</h2>
<p>{{post.description}}</p>
<paper-input name="paper-input" id="paperInputId" inputValue="{{value}}" label="Insert new object name..." floatingLabel="false"></paper-input>
<add-object-button on-click="{{fetchName}}" template="{{post.name}}" name="{{objName}}"></add-object-button>
</my-post-card>
</template>
</div>
<style>
:host {
display: block;
width: 100%;
}
my-post-card {
margin-bottom: 30px;
}
</style>
</template>
<script>
var objName;
Polymer({
fetchName: function () {
objName = this.$.pcId.querySelector('#paperInputId').value;
},
get objName() {
return objName;
},
});
</script>
現時点では、いくつかのボタンをクリックすると、(テンプレート属性を介して) 特定のカード情報を常に取得できますが、最初の紙の入力要素 (最初のカードの 1 つ) からのみテキストを取得できます。
Ps私はポリマーが初めてなので、何かばかげたことを見逃しているかもしれません...!