Polymer iron-ajax: How can I send value to an argument of a function - polymer-1.0

Question

First of all I want to say sorry for not-so-good title for this post. I could not think of anything better!
I am trying with iron-ajax. When I enter a value in my iron-input element and click on a button I get result fine. Now each record in the result has a link which is supposed to drill down more into the item itself.
To get first set of result I have done the following (which works fine):
<iron-ajax id="ajax"
handle-as="json"
on-response="hresponse"
last-response="{{data}}"
debounce-duration="300">
</iron-ajax>
<input is="iron-input" id="txtSearchItemsByName"/>
<button on-click="findItems">Search »</button>
<span id="waiting"></span>
<template is="dom-repeat" items="{{data}}">
<div>
<span>
<input id="itemId" value="{{item.id}}"/>
<a on-click="itemDetail( {{item.id}} )" href="javascript:;" title="{{item.plantid}}">{{item.title}}</a>
</span>
</div>
</template>
Following code block fetches all records which match the name entered by user
findPlants: function () {
var thisAjax = this.$.ajax;
var waitingContainer = this.$.waiting;
waitingContainer.innerHTML = "Please wait...";
var strEnc = encodeURIComponent(this.$.txtSearchItemByName.value);
this.$.ajax.url = "//domain.com/api/v0/items/search";
this.$.ajax.params = { "apikey": "xxxxxxxxxxx", "common_name": strEnc };
window.setTimeout(function () {
thisAjax.generateRequest();
waitingContainer.innerHTML = "";
}, 1000);
},
hresponse: function (request) {
data = this.$.ajax.lastResponse;
},
Up to this point everything works fine. Then I went on and created another function which is supposed to take an argument:
itemDetail: function (id) {
var thisAjax = this.$.ajax;
var waitingContainer = this.$.waiting;
waitingContainer.innerHTML = "Please wait...";
this.$.ajax.url = "//domain.com/api/v0/item/search";
this.$.ajax.params = { "apikey": "xxxxxxxxxx", "id": id };
window.setTimeout(function () {
thisAjax.generateRequest();
waitingContainer.innerHTML = "";
}, 1000);
},
And I expect the following line to do my job:
<a on-click="itemDetail( {{item.id}} )" href="javascript:;" title="{{item.plantid}}">{{item.title}}</a>
However, when I am clicking on the link I am getting the following error message and nothing is happening:
[iron-ajax-caller::_createEventHandler]: listener method itemDetail( {{item.id}} ) not defined
I have no idea what to do from here as I am still a newbie at Polymer.
Experts please help!
Thanks in advance,
Subrata

Answer 1

Use on-tap instead of on-click:
<a on-tap="_itemDetail" href="javascript:;" title="{{item.plantid}}">{{item.title}}</a>
Then in your function:
_itemDetail: function(e) {
var thisAjax = this.$.ajax, waitingContainer = this.$.waiting;
thisAjax.url = '//domain.com/api/v0/item/search';
thisAjax.params = { apikey: 'xxxxxx', id: e.model.item.id };
this.async(function() {
thisAjax.generateRequest();
waitingContainer.innerHTML = '';
}, 1000);
}
See documentation here for more info
As to why on-tap, check this out

Answer 2

I believe you made a simple mistake, if I'm not totally wrong. This:
<a on-click="itemDetail( {{item.id}} )" href="javascript:;" title="{{item.plantid}}">{{item.title}}</a>
should look like this:
<a on-click="{{itemDetail(item.id)}}" href="javascript:;" title="{{item.plantid}}">{{item.title}}</a>
I think it should work. Polymer 1.0 doesn't support string concatenation. In your case it can't put these together "itemDetail(" + item.id + ")". And therefore the syntax is as I described above.

Answer 3

<a on-click="itemDetail" data$="{{item.id}}" title="{{item.plantid}}">{{item.title}}</a>
itemDetail : function(e){
console.log(e.target.getAttribute("data"));
}