聚合物事件不會激發

產品catalog.html聚合物事件不會激發

<link rel="import" href="bower_components/polymer/polymer.html"> 
 
<link rel="import" href="bower_components/paper-card/paper-card.html"> 
 
<link rel="import" href="/bower_components/paper-button/paper-button.html"> 
 
<link rel="import" href="/bower_components/paper-icon-button/paper-icon-button.html"> 
 
<link rel="import" 
 
    href="/bower_components/iron-icons/image-icons.html"> 
 
<link rel="import" 
 
    href="/bower_components/iron-icons/iron-icons.html"> 
 
<link rel="import" 
 
    href="/bower_components/iron-icons/social-icons.html"> 
 
<link rel="import" href="/bower_components/iron-ajax/iron-ajax.html"> 
 
<link rel="import" href="/bower_components/paper-toast/paper-toast.html"> 
 

 
<dom-module id="product-catalog"> 
 
\t <template> 
 
\t \t <style> 
 

 
     /* Make all toolbar titles in this host green by default */ 
 
     :host paper-card { 
 
    \t --paper-card-header-image: { 
 
     \t width:200px; 
 
     \t height: 350px; 
 
     \t margin: 0 auto; 
 
    \t }; 
 
    \t --paper-card-header:{ 
 
    \t \t font-family: Impact; 
 
    \t \t text-align: center; 
 
    \t }; 
 
\t }; 
 
\t paper-icon-button.pink { 
 
    color: var(--paper-pink-500); 
 
    }; 
 
    paper-icon-button.blue { 
 
    \t color: var(--paper-light-blue-500); 
 
    }; 
 
    paper-icon-button.orange { 
 
    \t color: var(--paper-orange-500); 
 
    }; 
 
    paper-button.cart { 
 
    \t font-family: Impact; 
 
    }; 
 
    .yellow-button { 
 
    text-transform: none; 
 
    color: #eeff41; 
 
    }; 
 
    </style> 
 
     <iron-ajax 
 
     id="AjaxGet" 
 
     url="" 
 
     method="GET" 
 
     headers='{"X-Domain": "fashion","Accept-Language":"it","X-Country-Code":"IT","Accept":"application/stentle.api-v0.1+json"}' 
 
     handle-as="json" 
 
     on-response="_handleAjaxGetResponse" 
 
     on-error="_handleAjaxGetError" 
 
     ></iron-ajax> 
 

 
     <iron-ajax 
 
     id="AjaxPost" 
 
     url="" 
 
     method="POST" 
 
     headers='{"X-Domain": "fashion","Accept-Language":"it","X-Country-Code":"IT","Accept":"application/stentle.api-v0.1+json"}' 
 
     content-type="application/json" 
 
     body = "" 
 
     handle-as="json" 
 
     on-response="_handleAjaxPostResponse" 
 
     on-error="_handleAjaxPostError" 
 
     ></iron-ajax> 
 

 

 
\t \t <paper-card heading="{{productName}}" image="{{productCover}}" alt="{{productName}}" > 
 

 
    <div class="card-actions"> 
 
    <paper-button class="cart" raised on-click="addToCart">Add to cart</paper-button> 
 
    <paper-icon-button class="pink" alt="amami" icon="favorite"></paper-icon-button> 
 
    <paper-icon-button class="orange" alt="wishlist" icon="bookmark"></paper-icon-button> 
 
    <paper-icon-button class="blue" alt="condividi" icon="social:share"></paper-icon-button> 
 
    </div> 
 
</paper-card> 
 
\t </template> 
 
\t <script> 
 
\t Polymer({ 
 
\t \t is : 'product-catalog', 
 
\t \t properties:{ 
 
\t \t \t productId : String, 
 
\t \t \t isStandAlone : Boolean 
 
\t \t }, 
 
    listeners: { 
 
      'productAddedToCart': '_updateContent' 
 
    }, 
 
    _updateContent: function() { 
 
      console.log('Product catalog updated'); 
 
    }, 
 
    addToCart : function(){ 
 
     var productId = this.getAttribute('product-id'); 
 
     var baseUrl = ""; 
 
     if(this.cartId){ 
 
     this.$.AjaxPost.url = baseUrl + this.cartId+'/products'; 
 
     this.$.AjaxPost.body = 
 
      { 
 
      id : productId, 
 
      requestedQuantity : 1 
 
      }; 
 
     }else{ 
 
     this.$.AjaxPost.url = baseUrl; 
 
     this.$.AjaxPost.body = { 
 
      productCartList:[ 
 
      { 
 
       id : productId, 
 
       requestedQuantity : 1 
 
      } 
 
      ] 
 
     }; 
 
     } 
 
     this.$.AjaxPost.generateRequest(); 
 
    }, 
 
\t \t ready: function(){ 
 
\t \t \t var productId = this.getAttribute('product-id'); 
 
\t \t \t var isStandAlone = this.getAttribute('is-standalone'); 
 
\t \t \t if(isStandAlone){ 
 
\t \t \t \t this.$.AjaxGet.url = ""; 
 
\t \t \t \t this.$.AjaxGet.generateRequest(); 
 
\t \t \t } 
 
\t \t }, 
 
\t \t _handleAjaxGetResponse: function (data) { 
 
\t \t \t var result = data.detail.response.data; 
 
      this.productName = result.name; 
 
      var imagesArray = result.photoGallery.images; 
 
      for (var i = 0; i < imagesArray.length; i++) { 
 
      \t if(imagesArray[i].type==='cover'){ 
 
      \t \t this.productCover = imagesArray[i].imageURL; 
 
      \t } 
 
      }; 
 
      this.productDescription = result.description; 
 
     }, 
 
     _handleAjaxGetError: function (data) { 
 
      this.productName = ''; 
 
\t \t \t \t this.productCover = 'http://i01.i.aliimg.com/wsphoto/v0/509741225/Free-shipping-Autumn-Spring-Winter-New-British-men-casual-shoes-everyday-casual-shoes-fashion-shoes.jpg'; 
 
\t \t \t \t this.productDescription = ''; 
 
     }, 
 
     _handleAjaxPostResponse: function (data) { 
 
\t \t \t this.cartId = data.detail.response.data.id; 
 
     this.fire('productAddedToCart', {cartId: this.cartId}); 
 
     }, 
 
     _handleAjaxPostError: function (data) { 
 
      console.log('ko cart'); 
 
     } 
 
\t }); 
 
\t </script> 
 
</dom-module>

推車button.html

<link rel="import" href="bower_components/polymer/polymer.html"> 
 
<link rel="import" href="/bower_components/paper-icon-button/paper-icon-button.html"> 
 
<link rel="import" href="/bower_components/paper-badge/paper-badge.html"> 
 

 
<dom-module id="cart-button"> 
 
    <iron-ajax 
 
     id="AjaxGet" 
 
     url="" 
 
     method="GET" 
 
     headers='{"X-Domain": "fashion","Accept-Language":"it","X-Country-Code":"IT","Accept":"application/stentle.api-v0.1+json"}' 
 
     handle-as="json" 
 
     on-response="_handleAjaxGetResponse" 
 
     on-error="_handleAjaxGetError" 
 
     ></iron-ajax> 
 
<template> 
 
      <paper-icon-button id="cart-icon" icon="shopping-cart" aria-label="Shopping cart: 0 items" role="button" tabindex="0" aria-disabled="false"></paper-icon-button> 
 
      <paper-badge for="cart-icon" label="{{cartItems}}"></paper-badge> 
 
      <paper-toast id="toast1" duration="0" text="{{productName}} in carrello."> 
 
    \t \t <paper-button onclick="document.querySelector('#toast1').toggle()" class="yellow-button">Continua lo shopping!</paper-button> 
 
    \t \t <paper-button onclick="document.querySelector('#toast1').toggle()" class="yellow-button">Vai al checkout!</paper-button> 
 
\t </paper-toast> 
 
</template> 
 
<script> 
 
\t Polymer({ 
 
\t \t is : 'cart-button', 
 
\t \t properties:{ 
 
\t \t \t customerId : String 
 
\t \t }, 
 
     listeners: { 
 
      'productAddedToCart': '_updateContent' 
 
     }, 
 
     _updateContent: function() { 
 
      console.log('Cart button get updated'); 
 
     }, 
 
\t \t ready: function(){ 
 
\t \t \t var customerId = this.getAttribute('customer-id'); 
 
      this.cartItems = 0; 
 
\t \t }, 
 
     _handleAjaxGetResponse: function (data) { 
 
      var result = data.detail.response.data; 
 
      this.cartItems =result.productCart.length; 
 
     }, 
 
\t }); 
 
\t </script> 
 
</dom-module>

的index.html

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
     <script src="bower_components/webcomponentsjs/webcomponents.min.js"></script> 
 
     <link rel="import" href="bower_components/polymer/polymer.html"> 
 
     <link rel="import" href="product-catalog.html"> 
 
     <link rel="import" href="cart-button.html"> 
 
     <style> 
 
.flex-container { 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    -webkit-flex-flow: row wrap; 
 
    flex-flow: row wrap; 
 
    text-align: center; 
 
} 
 

 
.flex-container > * { 
 
    padding: 15px; 
 
    -webkit-flex: 1 100%; 
 
    flex: 1 100%; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 
\t <div class="flex-container"> 
 
\t <header> 
 
\t \t <cart-button></cart-button> 
 
\t </header> 
 
\t <section> 
 
\t \t <product-catalog product-id="5773d805d2453aed6a9e61e3" is-standalone="true"></product-catalog> 
 
    \t <product-catalog product-id="5773f17ad2453aed6a9e6205" is-standalone="true"></product-catalog> 
 
    \t <product-catalog product-id="5774046bd2453aed6a9e6211" is-standalone="true"></product-catalog> 
 
    \t <product-catalog product-id="577641a3d2453afd53c10b81" is-standalone="true"></product-catalog> 
 
\t </section> 
 
</div> 
 
</body> 
 
</html>

我是新來的聚合物。

我試着處理product-catalog元素中發生的事件cart-button元素。

我附加了一個聽衆 listeners: {'productAddedToCart': '_updateContent'} 但它不起作用。

這是錯誤的嗎？在組件之間是否有其他方式或最佳實踐來共享信息？

來源

2016-09-06 LaTorreFi

事件偵聽器不工作，因爲兩個元素都處於同一級別。因此，收聽該事件的方法之一是：

// in ready function in cart-button element 
this.listen(window, "productAddedToCart", "_updateContent"); 
//(I don't like this way, but how you structured your elements this should work)

來源

2016-09-08 18:20:23

是的，這是有效的！您認爲什麼是避免此解決方案的最佳組件設計？ – LaTorreFi

我認爲這是解決您遇到的問題最實用，最簡單的方法。但是也許我會爲這些元素創建一個容器，儘管這個選項會增加額外的邏輯和實際上不需要的額外編程。 –

我認爲不可能這樣做（或者我錯了嗎？）。

您的元素有不同的路徑。只有當您的元素cart-button將成爲product-catalog的祖先時，此方法纔有可能。

你必須在別的地方處理它。

例如您的<div class="flex-container">可能是另一個新組件，正在監聽productAddedToCart事件並在您的cart-button組件中調用某些公開方法。

來源

2016-09-07 14:20:26 Martin

聚合物事件不會激發

回答

相關問題