Sharing data across custom elements?

222 views
Skip to first unread message

Scott Beeson

unread,
Aug 4, 2014, 12:55:26 PM8/4/14
to polym...@googlegroups.com
I have core-ajax working fine, consuming data within a custom element.  However, I want to write my own element that exposes some data.  I'm starting out with a very simple example, looking at core-ajax for inspiration, but I'm not getting any data.  Here is exactly what I have:

(Sorry for the length, but I didn't want to trim something important)

INDEX.HTML
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/vendor/ui-lightness/jquery-ui-1.10.4.custom.min.css">
    <title>(Poly)</title>
    <script src="templates/platform/platform.js"></script>
    <link href="templates/core-ajax/core-ajax.html" rel="import">
    <link href="templates/dale-test/dale-test.html" rel="import">
    <link href="templates/dale-test2/dale-test2.html" rel="import">
    <link href="templates/one-listEntityCard/one-listEntityCard.html" rel="import">
    <link href="templates/polymer/polymer.html" rel="import">
</head>
<body>
<template is="auto-binding">
    <core-ajax auto
               url="https://<server>.firebaseio.com/entities.json"
               response="{{entities}}">
    </core-ajax>
    <one-listEntityCard entities="{{entities}}"></one-listEntityCard>
    <one-entityCard entity="{{entities[0]}}" class="size1x1"></one-entityCard>
    <!-- The things above work great -->

    <Dale-test2 auto response="{{test2Output}}"></Dale-test2>
    <Dale-test daledata="{{test2Output}}" testdata="merp"></Dale-test>

</template>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script>
<script src="js/vendor/jquery-ui-1.10.4.custom.min.js"></script>
</body>
</html>

Dale-test2.html - The "output" element (I've tried multiple things here, this is just the latest iteration)
<link rel="import" href="../polymer/polymer.html">
<polymer-element name="Dale-test2" attributes="testvalue">
    <template>
        This only outputs a value.
    </template>
    <script>
        Polymer('Dale-test2', {
            response: null,
            auto: true,
            ready: function() {
                var r = {text: "testing"};
                this.response = r;
                console.log(r.text);
            }
        });
    </script>
</polymer-element>

Dale-test.html - The consumer element
<link rel="import" href="../polymer/polymer.html">
<polymer-element name="Dale-test" attributes="daledata testdata">
    <template>
        Here is the value from Dale-test2: "{{daledata.text}}"
        Here is test data: "{{testdata}}"
    </template>
    <script>
        Polymer('Dale-test', {
        });
    </script>
</polymer-element>


And here is the output I see (excluding the cards):

This only outputs a value. Here is the value from Dale-test2: "" Here is test data: "merp"

Steve Orvell

unread,
Aug 4, 2014, 1:11:13 PM8/4/14
to Scott Beeson, polym...@googlegroups.com
You're expecting `<Dale-test2>` to make a property binding to its `response` property. To make this happen, you'll need to publish the `response` property. You can do so either by list is in the `attributes` of the `polymer-element` declaration or by creating a `publish` object and listing the initial value there:

Some additional info:


Here's how to do the `publish` object:

  publish: {
    response: null
  }


Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/6e4debac-b9c4-4da0-b107-23471cc15b79%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Scott Beeson

unread,
Aug 4, 2014, 2:10:13 PM8/4/14
to polym...@googlegroups.com, sbe...@gmail.com
That did it.  So why does core-ajax not have a publish?

Scott Beeson

unread,
Aug 4, 2014, 2:14:30 PM8/4/14
to polym...@googlegroups.com, sbe...@gmail.com
I see, if it's included in the "attributes" it automatically does it?

Steve Orvell

unread,
Aug 4, 2014, 2:14:52 PM8/4/14
to Scott Beeson, polym...@googlegroups.com
That's right.


To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/296c99c6-631e-4c0a-9543-246787bdb8f3%40googlegroups.com.
Reply all
Reply to author
Forward
0 new messages