Polymer data-binding array index

Question

How do you use a variable as an array index in polymer? Because I know this works:

{{array.0}}

I tried this, but it did not work (as expected):

{{array.{{index}}}}

Code:

<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>

I expected the get this output:

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

But instead got this:

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

Is this possible at all using polymer or should I user JS (and how)?

Answer 1

1) Not sure why you don't use properties, I think it is the intended way, not setting your properties in the ready-event.

2) I don't think it is possible to do this without a getter-method (=some JavaScript). This works :

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>