How to pass data from polymer element

Hello,

I'm new in polymer. I'm working on an app using polymer and phonegap. I'm facing an issue in passing data from a polymer element to page. I have a polymer element that generate random data. On a button tap, a new page is called. I want that random generated data to be shown in called page.

My polymer element code is

<polymer-element name="person-card">
<template>
    <div id="cardall">
        <template repeat="{{ data }}">
            <style>
        ...
            </style>
            <paper-shadow z="1" class="card">
                <div vertical layout>
            <div flex>
                                <core-icon icon="communication:location-on" class="icon-smaller"></core-icon>
                                <span class="info-bar">{{ ID }} {{ postingLocation }}</span>
                            </div>
                            <div>
                                <paper-button class="colored" on-tap="{{ showDetail }}" link="../www/Detail.html">
                                    <core-icon icon="description"></core-icon>
                                    &ensp;More Info
                                </paper-button>
                                <paper-button class="colored" on-tap="{{ tellUs }}">
                                    <core-icon icon="create"></core-icon>
                                    &ensp;Tell Us
                                </paper-button>
                            </div>
                </div>
            </paper-shadow>
        </template>
    </div>
</template>
<script>
    Polymer('person-card', {
        showDetail: function (e, detail, sender) {
            window.location.href = e.target.getAttribute('link'); 
        },
        tellUs: function (e, detail, sender) {

        },
        ready: function () {
            this.data = this.getData();
        },
        getData: function () {
            var data = [];
    //Sample Data For Testing
            for (var i = 0; i < 50; i++) {
                data.push({
                    ID: 'MI-' + Math.floor(Math.random() * (1000 - 1 + 1) + 1),
                    postingLocation: 'Random Location'
                });
            }
            return data;
        }
    });
</script>

This is the page where data is to shown. The page is simple html page.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    ...
</head>
<body>
    <style>
        ...
    </style>
    <polymer-element name="x-trigger" extends="paper-icon-button" relative on-tap="{{toggle}}" noink>
        <template>
            <shadow></shadow>
            <content></content>
        </template>
        <script>
            Polymer({
                toggle: function () {
                    if (!this.dropdown) {
                        this.dropdown = this.querySelector('paper-dropdown');
                    }
                    this.dropdown && this.dropdown.toggle();
                }
            });
        </script>
    </polymer-element>
    <core-scroll-header-panel condenses keepcondensedheader condensedheaderheight="64">
        <core-toolbar class="tall" style="height:300px">
            <a href="index.html" class="inherit">
                <paper-icon-button icon="arrow-back" title="polymer"></paper-icon-button>
            </a>
            <div flex></div>
            <x-trigger icon="social:share">
                <paper-dropdown class="no-padding" halign="right">
                    <div class="menu" style="color:#1d1d1d;">
                        <paper-item>Facebook</paper-item>
                        <paper-item>Google +</paper-item>
                        <paper-item>Whatsapp</paper-item>
                        <paper-item>Email</paper-item>
                        <paper-item>Message</paper-item>
                    </div>
                </paper-dropdown>
            </x-trigger>
            <div flex class="bottom indent" style="text-transform:capitalize;">Person Name</div>
        </core-toolbar>
        <div class="content">
            <div>
                <span style="font-size:.75em;color:#1d1d1d;font-weight:700;">Basic Information</span>
                <div class="detail">
                    <span class="red" style="font-weight:700;"> Unique ID </span>
                    <span> (Here I Need To Access Data) </span>
                </div>
                <div class="detail">
                    <span class="red" style="font-weight:700;"> Location </span>
                    <span> (Here I Need To Access Data) </span>
                </div>
            </div>
        </div>
    </core-scroll-header-panel>
</body>
</html>

Please help me out.

googlearchive / TemplateBinding

How to pass data from polymer element #216