Question

首先，我想对这篇文章的不太好的标题说抱歉。我想不出更好的东西！

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

要获得第一组结果，我已完成以下操作（工作正常）：

 <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>

但是，当我点击链接时，我收到以下错误消息，但没有发生任何事情：

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

我不知道该怎么办，因为我还是Polymer的新手。

专家请帮忙！

提前致谢， Subrata

Answer 1

使用点击而不是点击：

<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

Answer 2

如果我并非完全错误，我相信你犯了一个简单的错误。这样：

<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 3

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

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

聚合物iron-ajax：如何将值发送到函数

3 个答案: