polymer 3.0 data binding

Question

I'm having trouble with understanding how data binding in polymer works. I've checked the docs and some previous questions and still:

I have a host and a child elements. The child is a signup/login page which sends an ajax request to api and either registers a new user or receives a token for user. User data (name and token are saved in element's properties in storedUser Object. What I need is that the parent element (MyApp) could see this storedUser object.

Would really appreciate any help with understanding.

The host (simplified):

class MyApp extends PolymerElement {
    static get template() {
        return html`
        <div>{{Here needs to be some data from storedUser from child element}}</div>
        <register-login name="register-login" some-props={{storedUser}}></register-login>
      `;
    }
    ...
    static get properties() {
        return {
            page: {
                type: String,
                reflectToAttribute: true,
                observer: '_pageChanged'
            },
            routeData: Object,
            subroute: Object,
            user: {
                type: Object,
                notify: true
            }
        };
    }
    ...
}

Child:

class RegisterLogin extends PolymerElement {
    static get template() {
      return html`

        <div class="card">
        <div id="unauthenticated" hidden$="[[storedUser.loggedin]]">
          <h1>Log In</h1>

          <p>
            <strong>Log in</strong> or
            <strong>sign up</strong> to access!</p>
        <template is="dom-if" if="[[error]]">
            <p class="alert-error"><strong>Error:</strong> [[error]]</p>
        </template>
          <paper-input-container>
            <label slot="input">Username</label>
            <iron-input slot="input" bind-value="{{formData.username}}">
              <input id="username" type="text" value="{{formData.username}}" placeholder="Username">
            </iron-input>
          </paper-input-container>

          <paper-input-container>
            <label>Password</label>
            <iron-input slot="input" bind-value="{{formData.password}}">
              <input id="password" type="password" value="{{formData.password}}" placeholder="Password">
            </iron-input>
          </paper-input-container>

          <div class="wrapper-btns">
            <paper-button raised class="primary" on-tap="postLogin">Log In</paper-button>
            <paper-button class="link" on-tap="postRegister">Sign Up</paper-button>
          </div>
        </div>
        <div id="authenticated" hidden$="[[!storedUser.loggedin]]">
          <h2>Hello, [[storedUser.name]]!</h2>
          <p>You are now logged in. You can access <a href="[[rootPath]]secret-content">Secret Content</a>!</p>
        </div>
      </div>
      `;
    }

    static get properties() {
      return {
        formData: {
          type: Object,
          value: {}
        },
        storedUser: Object,
        error: String
      }
    }

    handleUserResponse(event) {
      var response = JSON.parse(event.detail.response);

      if (response.id_token) {
        this.error = '';
        this.setProperties(
          {
            storedUser: {
              name: this.formData.username,
              id_token: response.id_token,
              access_token: response.access_token,
              loggedin: true
            },
          }
        )
      }
      // reset form data
      this.formData = {};
    }

    handleUserError(event) {
      this.error = event.detail.request.xhr.response;
    }
  }

score 0 · Answer 1 · answered Jun 25 '18 at 07:39

I assume your code here is a simplify version, and everything is working except the storedUser.

The reason storedUser doesn't update the value in MyApp is because it is one way binding, downward (from MyApp to RegisterLogin).

To fix it, we can make storedUser as 2 ways binding, the change to make in the RegisterLogin is:

class RegisterLogin extends PolymerElement {
    // ...
    static get properties() {
      return {
        // ...
        storedUser: { type: Object, value: {}, notify: true },

      }
   }
}

polymer 3.0 data binding

1 Answers1