Skip to content
This repository has been archived by the owner on Mar 13, 2018. It is now read-only.

How to pass data from polymer element #216

Open
microice89 opened this issue May 8, 2015 · 0 comments
Open

How to pass data from polymer element #216

microice89 opened this issue May 8, 2015 · 0 comments

Comments

@microice89
Copy link

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.
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@microice89