聚合物即时更改数据阵列

时间:2016-03-14 14:38:58

标签: javascript polymer

我正在尝试通过选择另一个选项来更改纸张选项卡菜单的源数组。 {{lastResponse.0.lessons}}完美无缺。但是当我尝试生成这个时,我只是得到一个错误。

API响应:

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

谢谢你的时间!

1 个答案:

答案 0 :(得分:3)

你接近计算目标数组是要走的路。但是,您应该直接返回数组,而不是返回String。这些方面的东西:

    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作为参数添加到计算函数中,则只有在定义函数时才会调用该函数。