聚合物数据绑定数组索引

Question

如何在聚合物中使用变量作为数组索引？ 因为我知道这行得通：

{{array.0}}

我试过了，但它没有用（如预期的那样）：

{{array.{{index}}}}

代码：

<dom-module id="device-list">
    <template>
        <template is="dom-repeat" items="[[devices]]">
            <p>{{item.name}} is turned {{stateText.{{item.state}}}</p>
        </template>
    </template>
</dom-module>
<script>
    Polymer({
        is: "device-list",
        ready: function () {
            this.devices = [
                {
                    name: "device 1",
                    state: 0
                },
                {
                    name: "device 2",
                    state: 1
                },
                {
                    name: "device 3",
                    state: 1
                }
            ];
            this.stateText = ["OFF","ON"];
        }
    });
</script>

我希望得到这个输出：

device 1 is turned OFF
device 2 is turned ON
device 3 is turned ON

但是得到了这个：

device 1 is turned }}
device 2 is turned }}
device 3 is turned }}

这完全可以使用聚合物还是我应该使用 JS（以及如何使用）？

Answer 1

1）不知道你为什么不使用属性，我认为这是预期的方式，而不是在准备好的事件中设置你的属性。

2) 我认为如果没有 getter 方法（=一些 JavaScript）就不可能做到这一点。这有效：

http://jsbin.com/sufoma/edit?html,output

<dom-module id="device-list">
<template>
    <template is="dom-repeat" items="[[devices]]">
        <p>{{item.name}} is turned {{_getStateText(stateText,item.state)}}</p>
    </template>
</template>
</dom-module>
<script>
    Polymer({
        is: "device-list",
        properties: {
          devices: {type:Array,
                  value: [{
                    name: "device 1",
                    state: 0
                },
                {
                    name: "device 2",
                    state: 1
                },
                {
                    name: "device 3",
                    state: 1
                }]
          },
           stateText:{type:Array, value:["OFF","ON"]}
        },
        _getStateText:function(stateText,state) {
        return stateText[state];
      }
    });
</script>