从聚合物1中的其他元素获取价值

时间:2018-07-24 07:25:51

标签: html polymer-1.0

我有一个“ login-imp.html”文件(聚合物1元素),用于检查登录名并获取用户名和someID。

我需要在另一个html文件(modal-imp.html)中的其他聚合物元素中检索该“ someID”。

login-imp.html

<dom-module id="login-imp">
<style>...</style>
  <template>

<iron-ajax id="limp" url="SOMEURL" method="POST" handle-as="json"
  content-type="application/json" with-credentials="true" on-response="_handleResponse" on-error="_handleError">
</iron-ajax>

<iron-a11y-keys keys="enter" on-keys-pressed="_logIn"></iron-a11y-keys>

<div class="login">
  <paper-input value={{username}} label="[[lang.login_imp.user]]" name="username"></paper-input>
  <paper-input value="{{password}}" label="[[lang.login_imp.password]]" name="password" type="password"></paper-input>
  <span class="error-message">[[errorMessage]]</span>
  <paper-button id="login-button" on-tap="_logIn" raised>[[lang.login_imp.signin]]</paper-button>
</div>


<paper-dialog id="modalSignUp" entry-animation="scale-up-animation" exit-animation="fade-out-animation" with-backdrop>
  <modal-signup-imp id="modal-signup-view" lang="[[lang]]" config="[[config]]"></modal-signup-imp>
</paper-dialog>

  </template>
    <script>
    Polymer({
          is: 'login-imp',
          properties: {
            loggedIn: {
              type: Boolean,
              notify: true
            },        
            profile: {
              type: Object,
              notify: true,
              value: function () {
                return {}
              }
            },
            username: {
              type: String,
              notify: true,
              value: ''
            },
            password: {
              type: String,
              notify: true,
              value: ''
            },
            retailerId: {
              type: String,
              notify: true,
              value: ''
            },
            config: {
              type: String
            },
            default: {
              type: Array,
              notify: true
            },
            lang: {
              type: String
            },
            errorMessage: String,
            observers: ['_removeMessage(username, password)']
          },
          ready: function () {
            this.addEventListener('eventFromChild', this.closeModal);
          },
          _logIn: function () {
            Polymer.dom(this.root).querySelector("#login-button").disabled = true;

            this.$.limp.body = JSON.stringify({
              "username": this.username,
              "password": this.password
            });
            this.$.limp.generateRequest();
          },
          _handleResponse: function (xhrResponse) {
            Polymer.dom(this.root).querySelector("#login-button").disabled = false;
            var message = xhrResponse.detail.response.message;
            if (message == "Access granted (" + this.username + ")") {
              // save profile
              this.profile = xhrResponse.detail.response.user
              // change status to logged in
              this.loggedIn = true;
              this.username = '';
              this.password = '';
//THIS IS THE ID I NEED
              this.retailerId = xhrResponse.detail.response.user.id_retailer;
              this._removeMessage();
            }
          },
          _handleError: function (event) {
            Polymer.dom(this.root).querySelector("#login-button").disabled = false;

            this.errorMessage = [
              [this.lang.errors.signin]
            ];
            this.loggedIn = false;
          },
          _removeMessage: function () {
            this.set('errorMessage', '');
          },
          signup_modal: function () {
            Polymer.dom(this.root).querySelector("#modal-signup-view").xhrRetailers();

            var modal = Polymer.dom(this.root).querySelector("#modalSignUp");
            modal.open();
          },
          closeModal: function () {
            var modal = Polymer.dom(this.root).querySelector("#modalSignUp");
            modal.close();
          }
        });
      </script>
    </dom-module>

我已经尝试了各种方法,如Polymer 1 API和文档中所述,可以从modal-imp.html访问该对象。

-html 层次结构

login-imp.html-> main-imp.html-> index.html

modal-imp.html-> header-imp.html-> main-imp.html-> index.html

1 个答案:

答案 0 :(得分:0)

login-imp.html文件中的代码看起来不错。您将retailerId定义为属性,并将notify设置为true。我以为没有看到您最有可能使用了错误绑定的其他文件。

要在您的示例中进行说明:
您需要做的是将retailerId发送到main-imp.html 从那里将其绑定到header-imp.html,再绑定到modal-imp.html

示例:
在您的main-imp.html

<login-imp retailer-id="{{retailerId}}"></login-imp>

重要提示:

  1. 以两种方式(在您的情况下)绑定时,您必须使用{{mustaches}}括号
  2. 该属性必须使用小写字母,以便您的媒体资源名称更改为retailer-id
  3. 在main-imp.html属性部分内定义retailerId

类似问题
Maybe a similar question I have answered explaining one & two way data-binding