Search code examples
ember.jsdropdownbox

EmberJS drop down of previous months


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>

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}}