Cannot close Durandal modal

Question

I've read virtually every stackoverflow question on this and still can't get it working...

I have a modal that I use as a "please wait" whilst async functions are occurring.

Viewmodel is:

define(['plugins/dialog', 'knockout'], function (dialog, ko) {

    var CustomModal = function () {
        var self = this;
        this.msg = ko.observable(" Please Wait...");
    };

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

    CustomModal.close = function () {
        var self = this;
        dialog.close(self);
    };

    return CustomModal;
});

I have other modals that have an "ok" button and they close just fine, but this one is opened (and I hoped, closed) from within my main logic flow.

I "require" the modal viewmodel in my main code and this works fine to show it:

modalBusy.show();

However, this does not ever close the dialog and it's driving me nuts!

modalBusy.close();

I get no errors when debugging, but "self" in my close method is not an actual viewmodel object, just contains the

    var CustomModal = function () {
        var self = this;
        this.msg = ko.observable(" Please Wait...");
    };

bit again and obviously that's wrong.

Answer 1

You are forgetting to use prototype. Your close method should be:

CustomModal.prototype.close = function() {
    dialog.close(this);
}; 

The way you have it written, close() is a "static" method. Whereas, with prototype, it is a "class" method. That's why this isn't referencing what you expect. Using the prototype chain, this will reference the instantiated object.

UPDATE: Here is an example of how to close the modal from your main code that will work, but, it requires that you refactor your show() method.

define(['plugins/dialog', 'knockout'], function (dialog, ko) {
  var CustomModal = function () {
    this.msg = ko.observable(" Please Wait...");
  };

  CustomModal.prototype.show = function () {
    return dialog.show(this);
  };

  CustomModal.prototype.close = function () {
    dialog.close(this);
  };

  return CustomModal;
});

// from your main code, you use it like this    
var modal = new modalBusy();
modal.show();

// then, whenever you want to close it
modal.close();