聚合物事件没有解雇

时间：2016-09-06 18:17:42

标签： javascript javascript-events polymer web-component

产品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">
	<template>
		<style>

      /* Make all toolbar titles in this host green by default */
      :host paper-card {
    	--paper-card-header-image: {
        	width:200px;
        	height: 350px;
        	margin: 0 auto;
    	};
    	--paper-card-header:{
    		font-family: Impact;
    		text-align: center;
    	};
	};
	paper-icon-button.pink {
    color: var(--paper-pink-500);
  };
  paper-icon-button.blue {
  	color: var(--paper-light-blue-500);
  };
  paper-icon-button.orange {
  	color: var(--paper-orange-500);
  };
  paper-button.cart {
  	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>


		<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>
	</template>
	<script>
	Polymer({
		is : 'product-catalog',
		properties:{
			productId : String,
			isStandAlone : Boolean
		},
    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();
    },
		ready: function(){
			var productId = this.getAttribute('product-id');
			var isStandAlone = this.getAttribute('is-standalone');
			if(isStandAlone){
				this.$.AjaxGet.url = "";
				this.$.AjaxGet.generateRequest();
			}
		},
		_handleAjaxGetResponse: function (data) {
			var result = data.detail.response.data;
            this.productName = result.name;
            var imagesArray = result.photoGallery.images;
            for (var i = 0; i < imagesArray.length; i++) {
            	if(imagesArray[i].type==='cover'){
            		this.productCover = imagesArray[i].imageURL;
            	}
            };
            this.productDescription = result.description;
        },
      _handleAjaxGetError: function (data) {
            this.productName = '';
				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';
				this.productDescription = '';
      },
      _handleAjaxPostResponse: function (data) {
			   this.cartId = data.detail.response.data.id;
         this.fire('productAddedToCart', {cartId: this.cartId});
      },
      _handleAjaxPostError: function (data) {
            console.log('ko cart');
      }
	});
	</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.">
  		<paper-button onclick="document.querySelector('#toast1').toggle()" class="yellow-button">Continua lo shopping!</paper-button>
  		<paper-button onclick="document.querySelector('#toast1').toggle()" class="yellow-button">Vai al checkout!</paper-button>
	</paper-toast>
</template>
<script>
	Polymer({
		is : 'cart-button',
		properties:{
			customerId : String
		},
        listeners: {
            'productAddedToCart': '_updateContent'
        },
        _updateContent: function () {
            console.log('Cart button get updated');
        },
		ready: function(){
			var customerId = this.getAttribute('customer-id');
            this.cartItems = 0;
		},
        _handleAjaxGetResponse: function (data) {
            var result = data.detail.response.data;
            this.cartItems =result.productCart.length;
        },
	});
	</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>
	<div class="flex-container">
	<header>
		<cart-button></cart-button>
	</header>
	<section>
		<product-catalog product-id="5773d805d2453aed6a9e61e3" is-standalone="true"></product-catalog>
    	<product-catalog product-id="5773f17ad2453aed6a9e6205" is-standalone="true"></product-catalog>
    	<product-catalog product-id="5774046bd2453aed6a9e6211" is-standalone="true"></product-catalog>
    	<product-catalog product-id="577641a3d2453afd53c10b81" is-standalone="true"></product-catalog>
	</section>
</div>
</body>
</html>

我是Polymer的新手。

我尝试处理在product-catalog元素中的cart-button元素中触发的事件。

我附上了一个听众 listeners: {'productAddedToCart': '_updateContent'} 但它不起作用。

这是错的吗？ 是否有任何其他方式或最佳实践来在组件之间共享信息？

2 个答案:

答案 0 :(得分：0)

我认为不可能这样做（或者我错了吗？）。

您的元素有不同的路径。 只有当您的元素public void removeHalfNodes () { if ( root == null ) return; if ( root.left == null && root.right == null ) return; if ( root.left == null && root.right != null ) root = root.right; else if ( root.left != null && root.right == null ) root = root.left; removeHalfNodesRec ( root ); } public void removeHalfNodesRec ( BinaryTreeNode node ) { if ( node.left != null ) { if ( node.left.left == null && node.left.right != null ) node.left = node.left.right; else if ( node.left.right == null && node.left.left != null ) node.left = node.left.left; removeHalfNodesRec ( node.left ); } if ( node.right != null ) { if ( node.right.left == null && node.right.right != null ) node.right = node.right.right; else if ( node.right.right == null && node.right.left != null ) node.right = node.right.left; removeHalfNodesRec ( node.right ); } } 成为cart-button的祖先时，此方法才有可能。

你必须在其他地方处理它。

e.g。您的product-catalog可以是另一个新组件，在您的<div class="flex-container">组件中监听productAddedToCart事件并调用某些公共方法。

答案 1 :(得分：0)

事件侦听器无法正常工作，因为两个元素都处于同一级别。因此，监听该事件的一种方法是：

// 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)
相关问题
最新问题