Polymer determine the last item on dom-repeat items

Question

I'm trying to create breadcrumbs from an array of strings. I have an array property called taxonomy and it looks like the ["categories", "clothing", "men", "suits"]. Using dom-repeat like this:

<template is="dom-repeat" items="{{taxonomy}}" id="breadcrumbs">
  <span>{{item}}</span><span hidden$="[[computeSpanHidden]]"> > </span>
</template>

The resulting view looks like this:

categories > clothing > men > suits >

What i would like is to remove the last > to get something like this:

categories > clothing > men > suits

I have tried doing this by binding to the hidden attribute of the span i want to hide but I am stuck. The incomplete computeSpanHidden function looks like this:

computeSpanHidden: function(){
  if(this.taxonomy.slice(-1)[0] == /**the value i want to know how to get **/)
    { return true; } 
      else 
        { return false; }
}

Answer 1

You just need to use index to determine. Read it more from here.

index. The index of item in the array. (The index value changes if the array is sorted or filtered)

<span>{{item}}</span><span hidden$="[[computeSpanHidden(taxonomy,index)]]"> > </span>

computeSpanHidden: function(taxonomy,index){
  return (taxonomy.length - 1) === index
}