Octane and

Whenever I am in need of a select element, I find myself doing this:

  <select local-class="select" onchange={{this.setInterval}} {{did-insert this.updateInterval}} {{did-update this.updateInterval @interval}}>
    <option selected={{eq this.interval "1"}} value="1">1 minute</option>
    <option selected={{eq this.interval "60"}} value="60">1 hour</option>
    <option selected={{eq this.interval "120"}} value="120">2 hours</option>
    <option selected={{eq this.interval "240"}} value="240">4 hours</option>
    <option selected={{eq this.interval "720"}} value="720">12 hours</option>
    <option selected={{eq this.interval "1440"}} value="1440">24 hours</option>
  </select>

I am wondering, if there is a good way to remove all that boilerplate and generate an component which behaves more like this:

<EmberSelect>
  <Entry @val="1" @text"1 minute"/>
  <Entry @val="60" @text"1 hour"/>
</EmberSelect>

I don’t necessarily want to make it exactly look like that, but I want to find a way which lets me remove all the boilerplate code. Pretty much my issues is that I need a way which lets me define the available elements within the block. Any ideas?

(I am aware of power-select, but it’s just too heavy for our needs)

1 post - 1 participant

Read full topic