聚合物动态变化数据阵列



我正在尝试通过选择另一个菜单来更改纸质标签菜单的源数组。 {{lastResponse.0.lessons}}工作得很好。但是当我尝试生成它时,我只是得到一个错误。

接口响应:

[
{
    "date": "2016-02-23",
    "lessons": [
        "06a",
        "08e",
        "09b",
        "10b",
        "10c",
        "10d",
        "10e",
        "11",
        "12"
    ]
},
{
    "date": "2016-02-24",
    "lessons": [
        "05a",
        "05b",
        "05c",
        "05d",
        "06a",
        "08b",
        "08c",
        "08d",
        "08e",
        "09b",
        "09c",
        "10b",
        "10c",
        "10d",
        "10e",
        "11",
        "12"
    ]
},
...
]

元素:

<link rel="import" href="../../bower_components/polymer/polymer.html">
<dom-module id="vplan-gykl-test">
<template>
    <iron-ajax
            auto
            id="getMenu"
            url="../../../private/api/getMenu.php"
            params='{"school":"gykl"}'
            handle-as="json"
            last-response="{{lastResponse}}">
    </iron-ajax>
    <paper-tabs selected="{{selectedDate}}" id="date" scrollable>
        <template is="dom-repeat" items="{{lastResponse}}">
            <paper-tab>{{item.date}}</paper-tab>
        </template>
    </paper-tabs>

    <paper-tabs selected="{{selectedClass}}" id="class" scrollable>
        <template is="dom-repeat" items="{{lastResponse.[[selectedDate]].lessons}}">
            <paper-tab>{{item}}</paper-tab>
        </template>
    </paper-tabs>
</template>
<script>
    Polymer({
        is: 'vplan-gykl-test',
        properties: {
            selectedDate: {
                type: Number,
                value: 0
            }
        }
    });
</script>

我尝试使用计算字符串(相同的错误):

<script>
    Polymer({
        is: 'vplan-gykl-test',
        properties: {
            selectedDate: {
                type: Number,
                value: 0
            },
            targetArray: {
                computed: 'computeTargetArray(selectedDate)'
            }
        },
        computeTargetArray: function(index) {
            return('{{lastResponse.' + index + '.lessons}}');
        }
    });
</script>

错误:

[dom-repeat::dom-repeat]: expected array for `items`, found {{lastResponse.0.lessons}}

谢谢你的时间!

计算目标数组的方法就是要走的路。但是,您应该直接返回数组,而不是返回字符串。大致如下:

    computeTargetArray: function(index) {
        return this.lastResponse[index].lessons;
    }

确保将lastResponse定义为元素上的属性,并且还定义了 targetArray 的类型。

    properties: {
        selectedDate: {
            type: Number,
            value: 0
        },
        targetArray: {
            type: Array,
            computed: 'computeTargetArray(selectedDate, lastResponse)'
        },
        lastResponse: {
            type: Array
        },
    },

如果还lastResponse作为参数添加到计算函数,则只有在定义函数时才会调用该函数。

最新更新