How to close custom Durandal dialog from viewmodel within that dialog?

Question

I've set up a custom dialog using the example here: Durandal 2.0 custom dialog and it's working fine. My equivalent to "existing view" in that example is my login form, which has the usual username/password/login button.

The login button submits the form and this does a remote webapi call to validate the user. All works just fine so far. In the event the login is successful, I want to close the dialog, but I can't get it to work - it just stays open.

It seems to me that the dialog is expecting dialog.close(customModal,...') as that is the viewmodel that opened it. But as I'm a level down from that inside my login view, how do I bubble up the desire to close the current dialog from the viewmodel inside that dialog?

Main calling viewmodel does:

    Existing = require('./login')
    ...

    this.dialog = new CustomDialog('My title', new Existing());
    this.dialog.show().then(function (response) {
        //check login results and do whatever is necessary here...
    });

CustomModal viewmodel:

define(['plugins/dialog'], function (dialog) {
    var CustomModal = function (title, model) {
        this.title = title;
        this.model = model;
};

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

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

return CustomModal;

});

And login viewmodel:

define([
    'jquery',
    'knockout',
    'datacontext',
    'plugins/dialog'
], function ($, ko, dc, dialog) {
    var vmLogin = function () {
        var self = this;

        self.user = ko.observable('');
        self.password = ko.observable();

        self.doLogin = function () {

            return dc.doLogin(self.user, self.password)
                .done(function (data) {
                    if (data.success == true) { //logged in ok
                        dialog.close(self);
                    } else { //failed to log in
                        //todo: display error message
                    }
                })
            .fail(function (jqXHR, textStatus, errorThrown) {
                //
            });
        }
    };

    return vmLogin;
});

score 0 · Answer 1 · answered Sep 23 '15 at 10:27

Well I kind of refactored the code to get around this. I decided not to have the middle man "custom dialog" and instead called the login AS the custom dialog. All I needed to do was add in the close and show methods (probably didn't even need the prototype to be honest) and used those directly:

var vmLogin = function () {
    var self = this;

    self.user = ko.observable('');
    self.password = ko.observable();

    self.doLogin = function () {
        var self = this;

        return dc.doLogin(self.user, self.password)
            .done(function (data, p2, p3) {
                if (data.success == true) { //logged in ok
                    dialog.close(self, null);
                } else { //failed to log in
                    //TODO: Show message
                }
            })
        .fail(function (jqXHR, textStatus, errorThrown) {
            //
        });
    }

    vmLogin.prototype.close = function () {
        dialog.close(this, null);
    };

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

};

return vmLogin;

How to close custom Durandal dialog from viewmodel within that dialog?

1 Answers1