Polymer dom repeat without an array

1
votes

Can I use the polymer dom-repeat template without an array?
For example I want to render some code 20 times.

   <template is="dom-repeat" items="[[itemCounter]]">
      <div>Whatever</div>
   </template>

This would render <div>Whatever</div> 20 times, but to achieve this I have to create an array "itemCounter" in the components properties with length 20 with the sole purpose of looping over it.

I was wondering if something like this is possible, so I don't need to create the Array.

   <template is="dom-repeat" times="20">
      <div>Whatever</div>
   </template>
2
polymerpolymer-1.0

2 Answers

2
votes

Nope, you can't do this with the normal dom-repeat but I wrote a component which does exactly the trick: https://github.com/MeTaNoV/dom-repeat-n

There is also a discussion about this feature on the Polymer github repository that you can find here: https://github.com/Polymer/polymer/issues/3313

0
votes

You can do a messy hack like this

Properties:

totalNo: {
  type: Number,
  value: 20
},
_arrayContainer: {
  type: Array ,
  value: [],
  computed: '_numberToArray(totalNo)'
}

Method:

_numberToArray: function(totalNo) {
  var array = [], i;
  for (i = 0; i < totalNo; ++i) {
    array.push(i);
  };
  return array;
},

HTML:

<template is="dom-repeat" items="[[_arrayContainer]]">
  <div>Whatever</div>
</template>

But I'm not sure you'd every really want to.