Question

I am new to Ember and want to create a drop down box in multiple Ember applications that shows a list of the last 12 months. When the month is changed I want to reload the model based on that month.

How do I create the dynamic drop down and then reload the model based on the drop down? The default value of the drop down should be the current month.

Example of what the select box should be:

<select>
    <option value="2014-05">05 - 2014</option>
    <option value="2014-04">04 - 2014</option>
    <option value="2014-03">03 - 2014</option>
    <option value="2014-02">02 - 2014</option>
    <option value="2014-01">01 - 2014</option>
    <option value="2013-12">12 - 2013</option>
    <option value="2013-11">11 - 2013</option>
    <option value="2013-10">10 - 2013</option>
    <option value="2013-09">09 - 2013</option>
    <option value="2013-08">08 - 2013</option>
    <option value="2013-07">07 - 2013</option>
    <option value="2013-06">06 - 2013</option>
</select>
Was it helpful?

Solution

You can use Ember.Select. Docs link is http://emberjs.com/api/classes/Ember.Select.html

In your case

App.ApplicationController = Ember.Controller.extend({
  selectedMonth: null,
  months: [
    {text: "05 - 2014", value: "2014-05"}
  ],
  changeMonth: function(){
      //do changes whatever you want on dropdown change
  }.observes('selectedMonth')
});

{view Ember.Select
       content=months
       optionValuePath="content.value"
       optionLabelPath="content.text"
       selection=selectedMonth}}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top