jcuenod jcuenod - 4 months ago 10
Javascript Question

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
)?

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

Relevant Docs: