CODEWITHSUNDEEP
polymer
user70192
user70192

Reputation: 14204

Two-Way Binding Across Components in Polymer

I have a Polymer app that has some nested components. I'm trying to share a property value across the components. My thought was that I could do this with data-binding. However, I have been unsuccessful in my attempt, which can be seen in this Plunkr. The relevant code (I think) is here:

  <neon-animated-pages selected="[[selectedPageIndex]]" style="height:100%;">
    <view-1 is-enabled="{{ isEnabled }}"></view-1>
    <view-2 is-enabled="{{ isEnabled }}"></view-2>
  </neon-animated-pages>

Each view has a paper-toggle-button. If the toggle button is set in one view, I want that same value to appear in the other view. Yet, that is not what's happening. It's like each view is using it's own isEnabled value. As the Plunkr shows, I've done the following:

  1. Created a property called isEnabled in each view ("view-1.html" and "view-2.html").
  2. Created a property called isEnabled in the hosting component ("shell.html")
  3. Used two-way binding via the {{ }} curly-brace syntax.

What am I doing wrong? Why isn't the isEnabled value set in one view propogating to the other?

Thank you!

Upvotes: 1

Views: 230

Answers (2)

LoveAndHappiness
LoveAndHappiness

Reputation: 10135

First: Name your element files the way you name your elements. Change shell to app-shell in your directory.

Second: What user Maria said, just declare a notify: true property to each element you want to be able to databind, like this:

<dom-module id="view-1">
  <template>
    <h2>View 1</h2>
    <paper-toggle-button checked="{{ isEnabled }}">Is Enabled?</paper-toggle-button>
  </template>

  <script>
    Polymer({
      is: 'view-1',
      properties: {
        isEnabled: {
          type: Boolean,
          value: false,
          notify: true
        }
      }
    });
  </script>
</dom-module>

Do the same for the view-2 property.

Here is your plunkr with working two-way data binding:

http://plnkr.co/edit/YhjE02O14YGCErXu9Vtq

Hope it helps you.

Upvotes: 0

Maria
Maria

Reputation: 5604

You should set notify to true in the definition of the isEnabled property in you views. This is needed for two-way data-binding (docs).

Upvotes: 2

Related Questions