CODEWITHSUNDEEP
polymerpolymer-1.0
Michiel
Michiel

Reputation: 4260

Polymer dom repeat without an array

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>

Upvotes: 1

Views: 832

Answers (2)

Andrew Bone
Andrew Bone

Reputation: 7291

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.

Upvotes: 0

Pascal Gula
Pascal Gula

Reputation: 1173

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

Upvotes: 2

Related Questions