从 Polymer 1 中的其他元素获取值

Question

我有一个“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>

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

-html 层次结构：

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

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

Answer 1

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