CODEWITHSUNDEEP
polymerweb-component
Ryan Leach
Ryan Leach

Reputation: 4470

Simple Polymer(0.5.4) databinding example troubles

I'm having troubles with the following small self contained polymer example for databinding.

My understanding is that by having the consumer and supplier both have an attributes with data, with the expression {{stuff}} passed in, that this is referring to the variable "stuff", in the scope of the element.

When the supplier is loaded, and ready, it should populate the stuff variable, causing the consumer to insert the data.

http://jsbin.com/yawipodayo/1/edit?html,css,js,output

<!doctype html>
<html>
<head>
    <script src="../bower_components/webcomponentsjs/webcomponents.js">
    </script>
    <link rel="import" href="../bower_components/polymer/polymer.html">
</head>
<body>
    <polymer-element name="consumer" attributes="data">
        <template bind="{{data}}">{{}}</template>
    </polymer-element>
    <polymer-element name="supplier" attributes="data">
        <template></template>
        <script>
        Polymer('supplier', {
            ready: function(){
                this.data = "test"
            }
        });
        </script>
    </polymer-element>
    <polymer-element name = "root">
        <template>
            <supplier data="{{stuff}}"></supplier>
            <consumer data="{{stuff}}"></consumer>
        </template>
    </polymer-element>
    <root>
    </root>
</body>
</html>

Upvotes: 0

Views: 124

Answers (1)

Aleksei Matiushkin
Aleksei Matiushkin

Reputation: 121000

You have an amount of glitches within your code. I will drop comments around the problems to be fixed:

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8 />
    <title>Polymer</title>
    <script src="http://www.polymer-project.org/components/webcomponentsjs/webcomponents.js"></script>
    <link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html">
</head>
<body>
<!--  noscript tags are mandatory for elements not having script declared -->
                                                <!--  ⇓⇓⇓⇓⇓⇓⇓⇓ -->
<polymer-element name="my-consumer" attributes="data" noscript>
<!-- when you need to output data, output it -->
         <!-- ⇓⇓⇓⇓⇓⇓⇓⇓ -->
    <template>{{data}}</template>
</polymer-element>
<!-- names MUST include hyphens (everywhere) -->
                 <!--  ⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓  -->        
<polymer-element name="my-supplier" attributes="data">
    <template></template>
    <script>
      // As of 0.5 you don’t need to specify name in script
      //    ⇓⇓⇓⇓
      Polymer({
        ready: function(){
            this.data = "test"
        }
    });
    </script>
</polymer-element>
<polymer-element name = "my-root" noscript>
    <template>
        <my-supplier data="{{stuff}}"></my-supplier>
        <my-consumer data="{{stuff}}"></my-consumer>
    </template>
</polymer-element>
<my-root>
</my-root>
</body>
</html>

The corrected version works as expected: http://jsbin.com/zewimobaro/1/edit

Upvotes: 2

Related Questions