ember select change model property only on button click - ember.js

Question

I have an ember Select that is bound to a property of the model in a modal dialog.
I want the model property to change only if the user clicks OK (and gets reverted if he clicks cancel).
How can I do that?
edit-session-modal.hbs:
{{#modal-dialog title='Change status (select empty to return to original status)' ok='save' close='closeModal'}}
<form {{action 'ok' on='submit' target=view}}>
<div class="form-group">
<label>Status</label>
{{view "select" content=sessionStatuses selection=model.status}}
</div>
</form>
{{/modal-dialog}}
controllers/edit-session-modal.js:
import Ember from 'ember';
export default Ember.Controller.extend({
actions: {
close: function() {
return this.send('closeModal');
}
},
sessionStatuses: ['', 'SUCCESS', 'FAILURE', 'RUNNING'],
selectedStatus: "model.status"
});

Answer 1

You can achieve it by not binding the model.status property to selection property of Ember.Select, but use some kind of a buffer.
Let's say that your template look like this:
{{view "select" content=sessionStatuses selection=userSelection}}
And your controller should have following actions:
actions: {
close: function() {
this.set("selection", undefined); # or any other that should be default
# everything else, like closing the modal
},
save: function() {
this.set("model.status", this.get("selection"));
# everything else, like saving the model
}
}
EDIT after #Boaz reference
In #Boaz example there is no route defined for that controller. The solution turned out to be creating view object with didInsertElement as follows:
didInsertElement: function() {
modelStatus = this.get('controller').get('model.editedStatus');
this.get('controller').set('selectedStatus', modelStatus);
}