mercredi 20 juin 2018

polymer 3.0 data binding

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></div>
        <register-login name="register-login" some-props=></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="">
              <input id="username" type="text" value="" placeholder="Username">
            </iron-input>
          </paper-input-container>

          <paper-input-container>
            <label>Password</label>
            <iron-input slot="input" bind-value="">
              <input id="password" type="password" value="" 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;
    }
  }




Aucun commentaire:

Enregistrer un commentaire