Question

I have added selectionDidChange event for my Ember.Select, but when my view loads it fires the event for all the available dropdown options while loading. The reason being it is internally adding options to dropdowns & keeps firing the selectionDidChange event….Is there any way so that I can stop the initial event firing

Here’s my code(test code)

App = Em.Application.create();
App.myView = Em.View.extend({
  templateName: 'myTemplate',
  myArr:[{category:"spend"},{category:"cashflow"}],
  selectedItem: '',
  dropDownView: Ember.Select.extend({
     contentBinding: 'parentView.myArr',
     selectionBinding: 'parentView.selectedItem',
     optionLabelPath: 'content.category'
     selectionDidChange: function(){
       alert("yes it changed");
     }
  })
}); 

My corresponding Handlebar(myTemplate.handlebars) file
{{view.dropDownView}}

Now, when I load this view it alerts even before I select any option in the drop down…

Extra Info:I need this function as I am working on developing widget using RaphaelJS, so as I change the dropdown options I want the Widget to change.

Answer 1

Add the selectionDidChange function in didInsertElement:

dropDownView: Ember.Select.extend({
    didInsertElement: function(){
        this.set('selectionDidChange', function(){
            alert("yes it changed");
        });
    },
    contentBinding: 'parentView.myArr',
    selectionBinding: 'parentView.selectedItem',
    optionLabelPath: 'content.category'
})