I have a component that needs to communicate with a controller and eventually perform some clean up after the controller says everything is ok (ie, jQuery "un"-initialization). I think the best way to accomplish this is with a promise so that the component can clean up after the controller completes its task. But how can a controller action return a promise? Alternatively, can a component call a dynamic method directly on a controller?
For example, lets say I have a ModalDialogComponent
.
App.ModalDialogComponent = Ember.Component.extend
didInsertElement: ->
@$('.modal').modal('show')
actions:
save: ->
@sendAction('save').then(@closeModal.bind(@))
# some other actions are omitted
closeModal: ->
@$('.modal').modal('hide')
And I can instantiate the component inside a template named foo
,
{{modal-form save="save" ...}}
And implement the save
method on FooController
App.FooController = Ember.ObjectController.extend
save: ->
# how can we tell the component that this was successful?
As you can see, I only want the closeModal
function to execute if the save
action was successful. In other words, only close the modal if the record was saved successfully.
Is this possible, or am I going about it completely wrong?
promise is an object or function with a then method whose behavior conforms to this specification. thenable is an object or function that defines a then method. value is any legal JavaScript value (including undefined, a thenable, or a promise). exception is a value that is thrown using the throw statement.
By default, the {{action}} helper listens for click events and triggers the action when the user clicks on the element. You can specify an alternative event by using the on option. <p> <button {{action "select" post on="mouseUp"}}>✓</button> {{post.
In Ember. js, controllers allow you to decorate your models with display logic. In general, your models will have properties that are saved to the server, while controllers will have properties that your app does not need to save to the server.
send
and sendAction
are one way streets, that being said, you can send a defer to the action and expect it to resolve/reject it.
var defer = Ember.RSVP.defer();
defer.promise.then(function(resolvedValue){
alert(resolvedValue);
});
setTimeout(function(){
defer.resolve('hello world');
},2000);
Yours would look a bit like this
var defer = Ember.RSVP.defer(),
self = this;
defer.promise.then(function(){
self.closeModal();
},
function(){
alert('error');
});
this.sendAction('save', defer);
save action
actions: {
save: function(defer){
// if succeeded
defer.resolve();
// or if failure occurs
defer.reject();
}
}
Be careful, you want to make sure you don't leave out the reject route, you'd hate to have the modal stuck up there because the save failed and there wasn't a failure method.
Sorry I didn't convert to coffee script, I figure you'll either understand or convert and understand and I won't have given you a wrong answer.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With