Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

How to pass data from polymer element #1503

Closed
microice89 opened this issue May 8, 2015 · 4 comments
Closed

How to pass data from polymer element #1503

microice89 opened this issue May 8, 2015 · 4 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.
@masonlouchart
Copy link

Hello, firstly the style tag must be just under the first template tag. Here the style is repeated for each data.

Secondly, I think the trouble here is the redirection. So to find an answer to your question maybe you should search how passing parameters into a HTTP redirection. Create a form for each person wouldn't be a bad idea.

@windlessuser
Copy link

Also, look at Core-signals

@arthurevans
Copy link

Hi @microice89. This doesn't seem like a Polymer bug report, so you should probably ask it over on Stack Overflow. Tag it with #polymer -- there's a nice community over there. You can also ask questions on the polymer-dev mailing list and the Polymer Slack channel (http://polymer-slack.herokuapp.com/).

@masonlouchart
Copy link

You can find many solutions in this wonderful article:
https://www.polymer-project.org/0.5/articles/communication.html

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@windlessuser @arthurevans @masonlouchart @microice89