Polymer 1.0. Dom-repeat indicator starting at 1

Question

I am using Polymer 1.0 to create a shopping / order basket. I have clients who can send their order to several addresses. In the receipt, I need to specify all addresses with an index:

Address 1
John doe
1234 Main St
...

Address 2
Jane smith
999 Broadway
...

How to get an index starting with 1 instead of 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> 

This is a simplification of my actual code, but the principle is the same. I tried to make a js function that takes an index as a parameter and sets innerHTML to index c ++, but I don't know what event it should fire or how to get it to call a function.

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

I am new to all of this, so you cannot elaborate on how to make this work. Thanks for your help in advance!

Answer 1

You can use calculated binding for this.

Instead :

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

Do this :

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

If displayIndex is :

 function (index) { return index + 1; } 

Note: displayIndex may be

• element prototype method

 <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. method bound to auto-binding pattern

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