Using Event with Polymer

Categories: HTML5; Tagged with: HTML5 • Polymer; @ October 15th, 2015 22:26

Dispatching Event:

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

<dom-module id="item-detail">
    <template>
        <div id="container">
            <h3>{{item_id}}</h3>
        </div>
        <paper-button on-tap="onAddToCart"><iron-icon icon="icons:shopping-cart"></iron-icon>AddToCart</paper-button>
    </template>

    <script>
        Polymer({
            is: 'item-detail',

            properties: {
                item_id: {
                    type:Number,
                    value:-1
                }
            },
            onAddToCart: function(e) {
                console.log('adding...');
                this.fire('eventAddToCart', {item_id: this.item_id});
            }
        });
    </script>
</dom-module>

Event Listener:

<link rel="import" href="bower_components/polymer/polymer.html" />
<link rel="import" href="element/item-detail.html">

<dom-module id="main-app">
    <template>
        <item-detail id="item_detail" item_id="{{current_detail_id}}"></
    </template>
    <script>
        Polymer({
            is: 'main-app',

            listeners: {
                'item_detail.eventAddToCart': 'onAddToCart'
            },

            onAddToCart: function(e) {
                console.log('Event received' + e.detail.item_id);
                // this.addToCart(e.detail.item_id);
            }
        });
    </script>
</dom-module>

Dropbox Python SDK 2.2.0 bug: commit_chunked_upload ? <-> Connecting to Azure Windows virtual machine from Mac