0
私は仕事のプランカーを作成できなかったので、私は私のプライベートウェブサーバーにテストエレメットをアップロードしました。以下のコードをthevplan.de/x-test.htmlにテストすることができます。 JSONファイルはthevplan.de/getMenu.jsonにあります。Polymer：iron-selector issue
X-test.htmlという<!DOCTYPE html>
<html>
<head>
<title>x-test 4</title>
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="src/vplan-imports.html">
</head>
<body>
<dom-module id="x-test">
<template>
<iron-ajax
auto
id="getMenu"
url="getMenu.json"
handle-as="json"
on-response="handleResponse"
last-response="{{lastResponse}}"></iron-ajax>
<paper-dropdown-menu label="Day">
<paper-listbox class="dropdown-content" selected="{{selectedDateIndex}}">
<template id="dayList" is="dom-repeat" items="[[lastResponse]]">
<paper-item>[[item.day]]</paper-item>
</template>
</paper-listbox>
</paper-dropdown-menu>
<br>
<paper-dropdown-menu label="Class">
<paper-listbox id="classMenu" class="dropdown-content" selected="{{selectedClassValue}}"
attr-for-selected="value">
<template is="dom-repeat" items="[[targetArray]]">
<paper-item value="[[item]]">[[item]]</paper-item>
</template>
</paper-listbox>
</paper-dropdown-menu>
<br>
<br>
<span>selectedClassValue: [[selectedClassValue]]</span>
</template>
</dom-module>
<script>
Polymer({
is: 'x-test',
ready: function() {
},
properties: {
lastResponse: {
type: Array
},
targetArray: {
type: Array,
computed: 'computeTargetArray(selectedDateIndex, lastResponse)',
},
selectedDateIndex: {
type: Number,
value: 0
},
selectedClassValue: {
type: String
},
selectedClassValueOld: {
type: String
}
},
observers: [
'generateClassSelection(targetArray)'
],
handleResponse: function() {
//console.log('x-test: AJAX response ready');
},
computeTargetArray: function (selectedDateIndex, lastResponse) {
this.selectedClassValueOld = this.selectedClassValue;
this.selectedClassValue = false;
return (lastResponse[selectedDateIndex].lessons);
},
generateClassSelection: function (targetArray) {
console.log('x-test: targetArrayChanged');
if (targetArray.indexOf(this.selectedClassValueOld) != -1) {
Polymer.dom(this.root).querySelector('#classMenu').select(this.selectedClassValueOld);
console.log('x-test: selectedClassValueOld used');
} else {
Polymer.dom(this.root).querySelector('#classMenu').select(targetArray[0]);
console.log('x-test: first class selected');
}
}
});
</script>
<x-test></x-test>
</body>
</html>
[
{
"date": "2016-08-15",
"day": "Monday",
"lessons": [
"08b",
"08c",
"08d",
"09b",
"09c",
"09e",
"10b",
"11"
]
},
{
"date": "2016-08-16",
"day": "Tuesday",
"lessons": [
"06c",
"06d",
"07a",
"07b",
"09a",
"09b",
"09c",
"09d",
"09e",
"10a",
"10c",
"10d",
"11",
"12"
]
},
{
"date": "2016-08-17",
"day": "Wednesday",
"lessons": [
"06a",
"06b",
"06d",
"07a",
"07d",
"08b",
"08c",
"08d",
"09c",
"09e",
"10a",
"10d",
"11",
"12"
]
},
{
"date": "2016-08-18",
"day": "Thursday",
"lessons": [
"05a",
"06c",
"06d",
"07a",
"08c",
"09d",
"09e",
"10a"
]
}
]
あなたがエントリの同じ量でターゲット配列に切り替えた場合は、2番目のメニューが空白になります。月曜日から火曜日に切り替えると、すべて正常に動作します。しかし、月曜日から木曜日に切り替えると、値はドロップダウンメニュー内に表示されません。火曜日のメニュー配列には、月曜日の配列よりも多くのエントリがあります。しかし、木曜日の配列には、月曜日の配列と同じ量のエントリが含まれています。