Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Return a promise from a controller action in Ember?

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?

like image 870
Feech Avatar asked Dec 28 '13 01:12

Feech


People also ask

What is promise in Ember?

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.

What is action in Ember?

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.

What is an ember controller?

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.


1 Answers

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.

like image 102
Kingpin2k Avatar answered Sep 28 '22 16:09

Kingpin2k