Durandal 2.0 custom dialog

Question

I wish to make a Durandal custom dialog that adds a window frame with title and footer around an existing composable viewmodel.

I have made a customModal.html templa

Answer 1

I created a simplified example that you can use as starting point. It consists of an index view/vm that optionally opens an existing view/vm in a customModal. The existing view model is returned on close so that it's accessible.

index.js

define(function(require){
    "use strict";

    var app = require('durandal/app'),
        CustomDialog = require('./customModal'),
        Existing = require('./existingView'),
        ctor;

    ctor = function(){
        this.dialog;
    };

    ctor.prototype.showCustomModal = function(){
        this.dialog = new CustomDialog('My title', new Existing());

        this.dialog.show().then(function(response){
            app.showMessage('Model title "' + response.title + '".');
        });
    };

    return ctor;

});

index.html

    
Durandal 2.0 custom dialog
    click here  to open an existing view model in a custom
    dialog.

customModal.js

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;
});

customModal.html

    

        

    
    

        
        
    
    

        Ok
    

existingView.js

define(function () {

    var ctor = function () {
        this.title = 'I\'m an existing view';
    };

    return ctor;
});

existingView.html

Live version available at http://dfiddle.github.io/dFiddle-2.0/#so/21821997. Feel free to fork.