confirm before Ember.Select change

Question

i'm using Ember.Select view for using select. i want when user want to change item/index of select ember create a confirm so i using this way :

OlapApp.CubeSelectView = Ember.Select.extend({
contentBinding: "controller.content",
optionValuePath: "content.uniqueName",
optionLabelPath: "content.name",
prompt: "Please select a Cube",
valueBinding: "OlapApp.CubeController.test",
theSelectionChanged: function(e) {
    var userPropmpt = confirm("this operation Delete All of your work");
    if(userPropmpt)
    {
        this.get('controller').setMeasure(e.get('selection').get('uniqueName'));
    }

}.observes('selection')
});

but when user change select item the confrim opened also select item/index changed but i want after user press Ok button of confirm , select item change not when who click on select. here is jsbin sample. for example i try to select 'two' in select so confirm open and ask me but the value of select is changed at this time and dosent wait for confirm.

Can you produce a fiddle to play with. Also does this code get executed before you press OK button. if(userPropmpt) { this.get('controller').setMeasure(e.get('selection').get('uniqueName')); } — Thalaivar
i add jsbin sample. yes value of select change before i press Ok button . i want if user press cancel nothing change even value of select. — MBehtemam

Jeremy Green Jeremy Green · Accepted Answer · 2013-09-16T05:00:04

You can use selectionBinding to bind to a variable which acts as a temporary holder, then when that var changes you pop up the confirmation. If the user confirms, then you copy the temporary value into your "real" property. If they cancel, you copy the "real" property back into the temporary var.

App.IndexController = Ember.ArrayController.extend({
  content:['one','two','three','four','five'],
  selectedValue : 'one', // this is the buffer for the select
  realValue : 'one' // this is the real value
});

App.CubeSelectView = Ember.Select.extend({
  contentBinding:'controller.content',
  selectionBinding : 'controller.selectedValue',
  optionValuePath:'content',
  optionLabelPath:'content',
  change:function(e){
    var userConfirm = confirm("this operation Delete All of your work");
    if(userConfirm){
      this.set('controller.realValue', this.get('selection')); 
    }else{
      this.set('selection', this.get('controller.realValue'));
    }
  }
});

Here's a modified JSBin : http://jsbin.com/igUgEVO/1/edit

confirm before Ember.Select change

1 Answers