【发布时间】：2016-07-10 13:01:29
【问题描述】：
目标
通过 Polymer 从对象的 json 数组显示 html 表格。
问题
无法将 json 数据与消息绑定： Polymer::Attributes: 无法将数组解码为 JSON
这个测试反映了什么？
使用 iron-ajax 或直接使用 ajax 记录了上述相同的消息，此测试的结果是直接使用 ajax 来绕过 iron-ajax 可能出现的问题。问题是将 web 服务返回的 json 绑定到 Polymer 中继器。
聚合物DOM元素
<polymer-element name="fixtures-list">
<!-- <iron-ajax auto id="matchesService" verbose="true"
params='{{ajaxParams}}'
url="http://localhost:20440/MatchesService.svc/matches/GetAllForTeamInSeason"
handle-as="json"
method="GET"
on-request="handleRequestSent"
on-response="handleResponseReceived"
on-error="handleError"
last-response="{{matches}}"
debounce-duration="300"></iron-ajax>-->
<table class="table table-responsive">
<thead>
<tr>
<th>Date</th>
<th><abbr title="Kick Off">KO</abbr>/Result</th>
<th></th>
<th>Opponent</th>
<th>Venue</th>
<th><abbr title="Competition">Comp</abbr></th>
<th><abbr title="Televised">TV</abbr>/<abbr title="Attendance">ATT</abbr></th>
</tr>
</thead>
<tbody>
<template is="dom-repeat" items="{{matches}}">
<tr>
<td>{{KickOff}}</td>
<td>
<template if="{{IsResult}}">
{{Result}}
</template>
<template if="{{!IsResult}}">
{{KickOff}}
</template>
</td>
<td>{{Result}}</td>
<td>{{OpponentNameShort}}</td>
<td>{{Venue}}</td>
<td>{{EventAbbreviations}}</td>
<td>
<template if="{{IsResult}}">
{{Attendance}}
</template>
<template if="{{!IsResult}}">
{{BroadcasterAbbreviations}}
</template>
</td>
</tr>
</template>
</tbody>
</table>
<script>
Polymer({
is: 'fixtures-list',
properties: {
siteid: {
type: Number,
value: -1,
notify: true,
reflectToAttribute: true,
observer: 'logChange'
},
teamid: {
type: Number,
value: -1,
notify: true,
reflectToAttribute: true,
observer: 'logChange'
},
seasonid: {
type: Number,
value: -1,
notify: true,
reflectToAttribute: true,
observer: 'logChange'
},
ajaxParams: {
type: Object,
computed: 'processParams(siteid, teamid, seasonid)'
}
},
matches: [],
ready: function () {
console.log('polymer element ready');
$.ajax({
url: 'http://localhost:20440/MatchesService.svc/matches/GetAllForTeamInSeason',
data: {
siteId: this.siteid,
teamId: this.teamid,
seasonId: this.seasonid
},
error: function () {
console.log('ajax error');
},
dataType: 'json',
success: function (data) {
//console.log(JSON.parse(data));
this.matches = data;
},
type: 'GET'
});
},
processParams: function(siteid, teamid, seasonid) {
console.log('processParams: ' + siteid + ', ' + teamid + ', ' + seasonid);
return {
siteId: siteid,
teamId: teamid,
seasonId: seasonid
}
},
logChange: function(newValue, oldValue) {
console.log('Param changed to: ', newValue);
},
handleRequestSent: function (request) {
console.log('ReqSent');
//console.log(request);
},
handleResponseReceived: function (response) {
console.log('ResReceived');
//console.log(response);
//console.log("Received response: " + JSON.stringify(response.detail.response));
//this.result = response.detail.response;
},
handleError: function (event) {
console.log('error');
//var request = event.detail.request;
//var error = event.detail.error;
//console.log(request);
//console.log(error);
}
});
</script>
</polymer-element>
聚合物微.html
Polymer::Attributes: could`t decode Array as JSON 消息是从以下函数返回的，我为每个语句添加了控制台日志，并在尝试/捕获一种数组 JSON.parse 以获取更多详细信息。
起初我认为这个过程是双 JSON 解码，所以我将 ajax 数据类型设置为“文本”，并尝试使用 JSON.parse 手动解析数据，并成功解析数据。
deserialize: function (value, type) {
switch (type) {
case Number:
console.log('Number: ' + value);
value = Number(value);
break;
case Boolean:
console.log('Boolean: ' + value);
value = value != null;
break;
case Object:
console.log('Object: ' + value);
try {
value = JSON.parse(value);
} catch (x) {
}
break;
case Array:
console.log('Array: ' + value);
try {
value = JSON.parse(value);
} catch (x) {
//value = null;
console.warn('Polymer::Attributes: couldn`t decode Array as JSON');
}
break;
case Date:
console.log('Date: ' + value);
value = new Date(value);
break;
case String:
console.log('String: ' + value);
default:
break;
}
return value;
}
JSON returned from web service
结论
感觉好像 Polymer 将 {{matches}} 作为字符串而不是实际数据，如果有人能对这项相对较新的技术有所了解，我将非常感激 - 谢谢。
【问题讨论】：
-
这是整个 json 吗？你能用代码而不是图像发布整个json吗..
-
遇到同样的问题。 json 似乎有效，但聚合物一直在抱怨。虽然没有任何问题！
标签： javascript json data-binding polymer-1.0