Question

因为我没有创建一个工作的plunker我将测试elemet上传到我的私人网络服务器。您可以在thevplan.de/x-test.html测试以下代码。 JSON文件位于thevplan.de/getMenu.json。

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>

getMenu.json

[
  {
    "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"
    ]
  }
]

如果切换到具有相同数量条目的目标数组，则第二个菜单将变为空白。如果你从周一切换到周二一切正常。但是，如果您从星期一切换到星期四，则在下拉菜单中看不到该值。星期二的菜单数组比星期一的数组有更多的条目。但星期四的数组包含与星期一数组相同数量的条目。

Answer 1

我认为你遇到了计时问题。

您应等到dom-repeat等待dom-change事件后才等待<template is="dom-repeat" items="[[targetArray]]" on-dom-change="generateClassSelection"> </template>完成呈现（请参阅docs）

this.async

或者您可以使用paper-listbox推迟设置generateClassSelection: function (targetArray) { console.log('x-test: targetArrayChanged'); this.async(function() { 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'); } }的所选值：

Multiprocessing

聚合物：铁选择器问题

1 个答案: