maizzle / framework

Quickly build HTML emails with Tailwind CSS.
https://maizzle.com
MIT License
1.24k stars 49 forks source link

Simple loops #388

Closed raphaelgoetter closed 3 years ago

raphaelgoetter commented 3 years ago

Hello and thank you for your framework.

I would like to make a simple loop "item between 1 and {{var}} ".

I have seen that there is a loop tag to make loops (https://maizzle.com/docs/tags/#loops), but in my case I have only one variable and not an object or an array.

How do I do this?

Thanks in advance

cossssmin commented 3 years ago

You can only loop over enumerable variables, such as objects or arrays. If {{var}} is a number that you know, you could turn it into an array in your config.js, maybe like this:

module.exports = {
  arr: Array(5).fill().map((x,i) => i)
}

page.arr would then be [0, 1, 2, 3, 4] and you could loop over it in your template:

<each loop="item in page.arr">
  {{ item }}
</each>
raphaelgoetter commented 3 years ago

Thank you for your answer. In fact the variable is different for each component so I don't know its value.

I am currently using it by transmitting this value via locals : "mediaRating": "[1,2,3,4,5]", but I'd like a "simple" value like "mediaRating": 5

                      <component
                        src="src/components/media.html"
                        locals='{
                          "mediaRating": "[1,2,3,4,5]"
                        }'
                      >
                      </component>
<if condition="mediaRating">
        <p class="m-0">
          <each loop="index in {{ mediaRating }}">
            <img src="images/star.png" alt="★" width="14" />
          </each>
        </p>
      </if>
cossssmin commented 3 years ago

5 is not enumerable, so it can't work, sorry.