Polymer iron-ajax：如何将值发送到函数的参数

Question

首先，我想为这个 post 的 not-so-good 标题说声抱歉。我想不出更好的选择！

我正在尝试 iron-ajax。当我在我的 iron-input 元素中输入一个值并单击一个按钮时，我得到了很好的结果。现在，结果中的每条记录都有一个 link，应该可以更深入地了解项目本身。

为了获得第一组结果，我做了以下操作（效果很好）：

 <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 &raquo;</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>

以下代码块获取与用户输入的名称相匹配的所有记录

 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;
},

到目前为止一切正常。然后我继续创建另一个函数，该函数应该采用 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);
},

而且我希望以下行能够完成我的工作：

<a on-click="itemDetail( {{item.id}} )" href="javascript:;" title="{{item.plantid}}">{{item.title}}</a>

但是，当我单击 link 时，我收到以下错误消息，但没有任何反应：

[iron-ajax-caller::_createEventHandler]：侦听器方法itemDetail( {{item.id}} )未定义

我不知道从这里可以做什么，因为我还是 Polymer 的新手。

请专家帮忙！

提前致谢，苏布拉塔

Answer 1

我相信你犯了一个简单的错误，如果我没有完全错的话。这个：

<a on-click="itemDetail( {{item.id}} )" href="javascript:;" title="{{item.plantid}}">{{item.title}}</a>

应该是这样的：

<a on-click="{{itemDetail(item.id)}}" href="javascript:;" title="{{item.plantid}}">{{item.title}}</a>

我认为它应该有效。 Polymer 1.0 不支持字符串连接。在你的情况下，它不能把它们放在一起 "itemDetail(" + item.id + ")"。因此语法就像我上面描述的那样。

Answer 2

<a on-click="itemDetail" data$="{{item.id}}" title="{{item.plantid}}">{{item.title}}</a>

itemDetail : function(e){
    console.log(e.target.getAttribute("data"));
}

Answer 3

使用点击而不是点击：

<a on-tap="_itemDetail" href="javascript:;" title="{{item.plantid}}">{{item.title}}</a>

然后在你的函数中：

_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);
}

有关详细信息，请参阅文档 here

关于点击的原因，请查看this

Polymer iron-ajax：如何将值发送到函数的参数

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

polymer-1.0