I am currently utilizing Polymer to create a series of custom elements, specifically post-cards. Each post-card contains a thumbnail image that expands to display the original image when clicked. The link to the original image is fetched from an ajax call to the imgur API using a core-ajax component.
After experimenting with two different approaches, I am still uncertain about the optimal solution:
1. Embedding a core-ajax component within each post-card element.
While this method seems functional, I find it lacking in elegance.
2. Utilizing a single core-ajax component to handle all API requests.
Post-list.html
<core-ajax
url="{{imgur_url}}"
handleAs="json"
on-core-response="{{handleResponse}}">
</core-ajax>
<template repeat="{{post, postIndex in posts}}">
<post-card post={{post}} id={{postIndex}} on-img-tap={{imgurRequest}}>
</template>
The main issue I encounter with this approach is the difficulty in identifying which specific post-card element initiated the request upon receiving the response from core-ajax.
I have considered creating a new custom element by extending core-ajax, allowing me to pass and retrieve the post-card's ID as a parameter in the response. However, I believe there must be a simpler solution available, right?
Thank you for your assistance.