聚合物负载产品页面数据来自 JSON

Question

使用聚合物处理电子商务商店应用程序我正在使用聚合物 core-ajax 加载产品数组并使用核心动画页面显示产品缩略图和产品详细信息页面（完整视图）但我只想在单击每个产品拇指时加载产品详细信息，我怎么能这样做

找到 HTML

<div id="article-content" >
<template is="auto-binding" id="page-template" >
  <core-ajax
    id="ajaxpolo" auto
    url="./json/products.json"
    handleAs="json"
    on-core-response="{{handleResponse}}" response="{{headerList}}"  on-core-response="{{postsLoaded}}">
  </core-ajax>
  <core-animated-pages id="fpages" flex selected="{{$.polo_cards.selected}}" on-core-animated-pages-transition-end="{{transitionend}}" transitions="cross-fade-all slide-from-right">
    <section vertical layout>
      <div id="noscroll" fit hero-p>
        <div id="container" flex horizontal wrap around-justified layout cross-fade >
          <section on-tap="{{selectView}}" id="polo_cards" >
            <template repeat="{{item in headerList}}">
              <div class="card" vertical center center-justified layout hero-id="item-{{item.id}}" hero?="{{$.polo_cards.selected === item.id || lastSelected === item.id }}" > <span cross-fade hero-transition style="">{{item.name}}</span></div>
            </template>
          </section>
        </div>
      </div>
    </section>
    <template repeat="{{item in headerList}}">
      <section vertical layout>
        <div class="view" flex vertical center center-justified layout hero-id="item-{{item.id}}"    hero?="{{$.polo_cards.selected === item.id || $.polo_cards.selected === 0}}" >
          <core-icon-button class="go_back" icon="{{$.polo_cards.selected != 0 ? 'arrow-back' : 'menu'}}" on-tap="{{goback}}"></core-icon-button>
          {{item.name}} <span cross-fade class="view-cont" style="height:1000px; overflow:scroll;"></span></div>
      </section>
    </template>
  </core-animated-pages>
</template>

Answer 1

首先，您需要将核心 ajax 的自动属性设置为 false。 auto="false" 这将阻止 core-ajax 自行获取数据。然后在要成为点击/点击处理程序的元素上设置点击或点击属性。 on-tap="{{getThem}}" 然后创建函数。

getThem: function () {
  this.$.ajaxpolo.go();
}

应该明白了。希望能帮助到你。

编辑：您将希望通过活动获得更多东西。在点击/点击处理程序上，将您希望获取的项目的 ID 添加到通用属性中。（远离普通属性。即 id、title 等）dataId 我会调用它。

<div on-tap="{{getThem}}" dataId="{{product_id}}"></div>

然后在你的函数中，你会得到一些关于事件的更多信息，正如我之前所说的。

getThem: function (event, detail, sender) {
  var id = sender.attributes.dataId.value;
  // do something with id
}

我刚刚意识到当你谈论 php 时我可能误解了。对不起。

聚合物负载产品页面数据来自 JSON

Polymer Load Product Page data from JSON

javascript

jquery

polymer