Search code examples
javascriptractivejs

How to generate a Ractive <select> with only a max value

Using Ractive, I want to generate a dropdown with number options from 1 to n.

A select element can be generated using (source):

<select value='{{selectedCountry}}'>
    <option selected disabled>Select a country</option>
    {{#countries}}
        <option value='{{id}}'>{{name}}</option>
    {{/countries}}
</select>

with:

ractive = new Ractive({
    el: myContainer,
    template: myTemplate,
    data: {
        countries: [
            { id: 'AFG', name: 'Afghanistan' },
            { id: 'ALB', name: 'Albania' },
            // and so on...
        ]
    }
});

So the data will change to something like:

ractive = new Ractive({
    el: myContainer,
    template: myTemplate,
    data: {
        n: 50
    }
});

But what is the syntax for the #countries loop when you only have a max value (n)?

Solution 
  • <select>
{{#each Array(n):i}}
    <option>option {{i}}</option>
{{/each}}
</select>

    Relevant Docs: