Polymer - <iron-ajax> 数据绑定

Question

我创建了一个聚合物元素，并在该元素内部获取一个小的 .json 文件，我需要将其用于各种参数。

我的 JSON 文件如下所示。

 {
  "server_name" : "XMS Development Site",
  "server_url" : "test0",
  "xms_version" : "3.0.0 BETA",
  "rest": {
     "os_url" : "test1",
     "mbo_url": "test2",
     "login_url": "test3",
     "logout_url": "test4",
  }
}

我无法通过我的 iron-ajax 请求访问此 JSON 对象中的值。 {{response.xms_version}}binding 只是显示为空白。响应功能仅显示空值。查看 chrome 的开发工具，检索到 JSON 文件并且数据都在那里。似乎由于某种原因我无法绑定它。我没有尝试使用 dom-repeat 方法，因为我只需要能够绑定到这些数据点。

我的元素如下所示：

<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/paper-input/paper-input.html">
<link rel="import" href="../../bower_components/paper-button/paper-button.html">
<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">

<dom-module id="xms-login">


  <template>
    <style>
      :host {
        display: block;
      }
      .login-form-button{
        padding: 16px;
        text-align: center;
      }
      .login-form{

      }
      .login-field{
        padding-top: 16px;
        padding-left: 16px;
        padding-right: 16px;

      }
      .login-button{
        background-color: var(--default-primary-color);
        color: var(--text-primary-color);
      }
      .xms-logo-svg{
        text-align: center;
        padding-top: 64px;

      }
      .version-number-text{
        text-align: center;
        postion: absolute;
        bottom: 0;
      }

    </style>

    <iron-ajax id="testAjax" auto
      url="../../xms.json"
      handle-as="json"
      method="GET"
      on-response="handleResponse"
      last-response="{{response}}"></iron-ajax>

    <xms-auth id="xmsAuthHandler" authheader="{{computeEncodedLogin(username, password)}}" provider="rest"></xms-auth>

    <div class="login-form">
      <div class="login-form-fields">
        <paper-input class="login-field" type="text" label="Username" value="{{username}}"></paper-input>
        <paper-input class="login-field" type="password" label="Password" value="{{password}}"></paper-input>
      </div>
      <div class="login-form-button">
        <paper-button raised class="login-button" onclick="xmsAuthHandler.login()">Login</paper-button>
      </div>
      <div class="version-number-text">{{response.xms_version}}</div>
    </div>




  </template>
  <script>
  (function() {
    'use strict';

    Polymer({
      is: 'xms-login',

      properties: {

        user: {
          type: String,
          notify: true
        },

        username: {
          type: String,
          notify: true
        },

        password: {
          type: String,
          notify: true
        },
      },

               computeEncodedLogin: function( username, password ){
        return btoa(username + ':' + password);
      },


      handleResponse: function(request){
        var myResponse = request.detail.response;
        console.log(myResponse);
      }
    });
  })();
  </script>
</dom-module>

Answer 1

问题已修复，是由不正确的 JSON 数据引起的。