CODEWITHSUNDEEP
javascriptjquerydurandal
chipatama
chipatama

Reputation: 173

Callback on Durandal Modal

I have a custom Durandal viewmodel which has the method:

customModalNewMetric.show(someid);

In my CustomModalNewMetric viewmodel, the method looks like this:

CustomModalNewMetric.show = function(someid) {
        return dialog.show(new CustomModalNewMetric(someid));
};

How can I execute some function after the dialog.show function is complete? I want to execute some jQuery after the dialog is shown.

Upvotes: 1

Views: 573

Answers (2)

Dom
Dom

Reputation: 40459

Durandal's dialog.show() returns a promise, so all you need to do is the following:

CustomModalNewMetric.show = function(someid) {
    return dialog.show(new CustomModalNewMetric(someid)).then(function(data) {
    //callback function here (called after dialog is closed)
    //also will return any passed data
    });
}

NOTE: When using durandal, make sure you have:

  • defined all your modules using requirejs
  • check for any errors within your console.

EDIT (12/24/2013):

I came across this example, with the source code that illustrates the answer I provided.

Let me know if you have any other questions!

Upvotes: 1

Stuart Wakefield
Stuart Wakefield

Reputation: 6414

To perform subsequent commands after the dialog has opened, it looks as though what you need to do is to add your own dialog context with a compositionComplete method (DialogContext.compositionComplete).

You can add a new context with the dialog.addContext method.

Here I am crudely decorating the default context and adding it as 'myContext' (there are likely to be more elegant ways of doing this):

dialog.addContext('myContext', {

  // Retain the behaviour of the original default context
  parentContext: dialog.getContext(),

  // Nothing but a passthrough to the parent context
  addHost: function(theDialog) {
    this.parentContext.addHost(theDialog);
  },
  removeHost: function(theDialog) {
    this.parentContext.removeHost(theDialog);
  },
  attached: function(view) {
    this.parentContext.attached(view);
  },

  // Here we do something different
  compositionComplete: function(child, parent, context) {
    this.compositionComplete(child, parent, context);
    // Do something now that the modal is open
    console.log('Modal opened');
  }
});

Then when you open the dialog you'll need to pass the context name:

dialog.show(new CustomModalNewMetric(someid), null, 'myContext');

Upvotes: 0

Related Questions