CODEWITHSUNDEEP
javascriptpolymer
Jonathan Dumaine
Jonathan Dumaine

Reputation: 5756

Polymer two-way binding between custom elements [example included]

I'm trying to make custom element within a custom element and have the inner custom element able to change its value from within and the outer able sync its binding on that change. What can I do to get this working?

I've thoroughly scoured the documentation, but it's very lackluster in this department. I believe Node.bind() may be something of interest, but not sure how it would apply in this case.

Here's a simplified test case and plunker demo:

  <polymer-element name='test-app'>
       <template>

           First:
           <test-input id='one' value='{{value}}'></test-input>

           <br/>
           <br/>

           Second:
           <test-input id='two' value='{{value}}'></test-input>

           <br/>
           <br/>

           Value:
           {{value}}
       </template>
       <script>
           Polymer({ 
               value: 5
           })
       </script>
   </polymer-element>

   <polymer-element name='test-input'>

       <template>

           <style>
               #val {
                   font-size: 50px;
               }
           </style>

           <div id='val'>{{value}}</div>

           <button on-tap='{{increment}}'>+</button>
           <button on-tap='{{decrement}}'>-</button>

       </template>

       <script>
           Polymer({

               publish: {
                   value: 4
               },
               increment: function() {
                   this.value = this.value + 1;
               },
               decrement: function() {
                   this.value = this.value - 1;
               }
           })
       </script>
   </polymer-element>

   <test-app></test-app>

http://plnkr.co/edit/KjQ9DusaFg2jp1BTFUde?p=preview

If this was working, the value property of the test-app parent element should be in sync with both of the test-inputs value property.

Upvotes: 0

Views: 362

Answers (1)

Peter Burns
Peter Burns

Reputation: 45311

Notice this warning in the console:

Attributes on test-input were data bound prior to Polymer upgrading the element. This may result in incorrect binding types.

test-app uses test-input before Polymer knows about test-input. All of an element's dependencies must be declared before that element is declared. Move test-input above test-app and it works as expected.

http://plnkr.co/edit/ZaIj60S3lAHT18k5T3sn?p=preview

Upvotes: 1

Related Questions