javascript - tag - title of page html

Índice de visualización de repetición del domo del polímero 1.0 a partir de 1

Question

Estoy usando Polymer 1.0 para crear un carrito de compras / compras. Tengo clientes que pueden enviar su pedido a varias direcciones. En el recibo, necesito enumerar todas las direcciones con un índice:

Dirección 1
John Doe
1234 Main St
...

Dirección 2
Jane Smith
999 Broadway
...

¿Cómo consigo que el índice comience en 1 en lugar de 0?

    <template is="dom-repeat" items="{{shipping_details}}" as="address">
        <div>Address <span>{{index}}</span></div>
        <div>{{address.name}}</div>
        <div>{{address.line1}}</div>
    </template>

Esto es una simplificación de mi código real, pero el principio es el mismo. He intentado hacer una función js que toma el índice como parámetro y establece el innerHTML para indexar ++, pero no sé en qué evento debería activarse o cómo hacer que llame a la función.

    <div>Address <span on-some-event="displayIndex(index)"></span></div>

Soy nuevo en todo esto, por lo que no puede entrar en demasiados detalles sobre cómo hacer que esto funcione. ¡De forma anticipada, muchas gracias por su ayuda!

Answer 1

Puede usar un enlace calculado para esto.

En lugar de esto :

<span on-some-event="displayIndex(index)"></span>

Haz esto :

<span>{{displayIndex(index)}}</span>

Cuando displayIndex es esto :

function (index) {
    return index + 1;
}

Nota: displayIndex puede ser

1. un método en el prototipo del elemento

<dom-module id="cart-addresses">
    <template is="dom-repeat" items="{{shipping_details}}" as="address">
        <div>Address <span>{{displayIndex(index)}}</span></div>
        <div>{{address.name}}</div>
        <div>{{address.line1}}</div>
    </template>
    <script>
        Polymer({
            is: ''cart-addresses'',
            ...
            displayIndex: function(index) {
                return index + 1;
            }
            ...
        });
    </script>
</dom-module>

2. un método adjunto a una plantilla de vinculación automática

    <template is="dom-bind">
        ...             
        <template is="dom-repeat" items="{{shipping_details}}" as="address">
            <div>Address <span>{{displayIndex(index)}}</span></div>
            <div>{{address.name}}</div>
            <div>{{address.line1}}</div>
        </template>
    </template>
    <script>
        var template = document.querySelector(''template[is="dom-bind"]'');

        ...

        template.displayIndex = function (index) {
            return index + 1;
        };
    </script>