Javascript 聚合物-<;铁阿贾克斯>;数据绑定
我已经创建了一个polymer元素,在该元素中,我获取了一个小的.json文件,我需要用于各种参数 我的JSON文件如下所示Javascript 聚合物-<;铁阿贾克斯>;数据绑定,javascript,json,ajax,polymer,Javascript,Json,Ajax,Polymer,我已经创建了一个polymer元素,在该元素中,我获取了一个小的.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": "tes
{
"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}}
绑定只是显示为空。on响应函数只显示null。在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>
:主持人{
显示:块;
}
.登录表单按钮{
填充:16px;
文本对齐:居中;
}
.登入表格{
}
.登录字段{
填充顶部:16px;
左侧填充:16px;
右边填充:16px;
}
.登录按钮{
背景色:var(--默认原色);
颜色:var(--文本原色);
}
.xms徽标svg{
文本对齐:居中;
填充顶部:64px;
}
.版本号文本{
文本对齐:居中;
职位:绝对职位;
底部:0;
}
登录
{{response.xms_version}
(功能(){
"严格使用",;
聚合物({
是:“xms登录”,
特性:{
用户:{
类型:字符串,
通知:正确
},
用户名:{
类型:字符串,
通知:正确
},
密码:{
类型:字符串,
通知:正确
},
},
ComputeEncodeLogin:函数(用户名、密码){
返回btoa(用户名+':'+密码);
},
HandlerResponse:功能(请求){
var myResponse=request.detail.response;
console.log(myResponse);
}
});
})();
问题已修复,是由不正确的JSON数据引起的