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
}