CODEWITHSUNDEEP
polymer
Peter Burns
Peter Burns

Reputation: 45351

Polymer data binding across elements not working in Chrome dev / canary

I've been happily developing an app in Polymer. All is going well, but some fairly basic stuff isn't working in Chrome Dev and Chrome Canary, is this expected?

Here's a reduction of what I'm seeing [codepen to try it out yourself]:

<script src="http://www.polymer-project.org/platform.js"></script></script>
<link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html">

<my-app></my-app>

<polymer-element name='my-app'>
  <template>
    <my-processor input='{{input}}' output='{{output}}'>
    <input value='{{input}}'> <br>
    Input: {{input}} <br>
    Processed: {{output}} 
  </template>
  <script>
    Polymer('my-app', { 'input': 'hello world', });
  </script>
</polymer-element>

<polymer-element name='my-processor' attributes='input output'>
  <script>
    Polymer('my-processor', {
      inputChanged: function() {
        this.output = this.input + ' (processed)';
      }
    });
  </script>
</polymer-element>

In Chrome Dev and Canary the processed output is never displayed. I've used the debugger to see that inputChanged does fire on the my-processor element, but my-app never gets the updated output value.

In Chrome 34, Safari and Firefox everything works as expected and the processed output is displayed as expected.

Upvotes: 0

Views: 261

Answers (1)

ebidel
ebidel

Reputation: 24109

As per the warning in the console, it's important that the the my-processor definitions comes prior to my-app that uses it. my-processor needs to be registered first for the bindings to be picked up properly.

http://jsbin.com/xovegoga/3/edit

Upvotes: 2

Related Questions