Returning something from a Durandal modal dialog

Question

I develop an asp.net solution with the Durandal template.

I would like to use a modal dialog to choose an element in a table and return to the main viewmodel the choosen element.

Here is what I have so far:

On the main view I have a link (changer) allowing me to open the modal-dialog:

enter image description here

Here is the function of my viewModel called when link is clicked:

var changeSender = function (item) {
    app.showModal('viewmodels/sender');
};

So I open the dialog called sender.

Below is the viewModel of the sender:

define(function (require) {

    var system = require('durandal/system'),
        datacontext = require('services/datacontext');

    var senders = ko.observableArray();

    var activate = function () {
        return datacontext.getSenders(senders);
    };

    var buttonOk = function (dialogResult) {
        this.modal.close(dialogResult);
    }

    var buttonCancel = function () {
        this.modal.close();
    }

    var vm = {
        activate: activate,
        senders: senders,
        buttonOk: buttonOk,
        buttonCancel: buttonCancel
    };

    return vm;
});

Below is the view of the ´sender´:

<div class="messageBox autoclose" style="max-width: 500px">
    <div class="modal-header">
        <h3>Expéditeur</h3>
    </div>
    <div class="modal-body">
          <table class="">
            <thead>
                <tr>
                    <th></th>
                    <th>Name</th>
                    <th>Street</th>
                    <th>City</th>
                </tr>
            </thead>

            <tbody data-bind="foreach: senders">
                <tr data-bind="attr: {'data_id':id}">
                    <td><input type="radio" name="isSelected" data-bind="checked: isSelected" /></td>
                    <td data-bind="text: name"></td>
                    <td data-bind="text: street"></td>
                    <td data-bind="text: city"></td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" data-bind="click: buttonOk">Ok</button>
        <button class="btn" data-bind="click: buttonCancel">Cancel</button>
    </div>
</div>

enter image description here

My problem is I don't know how to identify the selected radio button and return it to the main view.

Any help is greathly appreciated.

Thanks.

Quick question about your post. In your buttonOk, how/why do you have access to this.modal? — Normand Bedard
Take a look at this: durandaljs.com/documentation/Showing-Message-Boxes-And-Modals There is dialog.close(...) but in my code I use modal.close. I'm still using Durandal 1.2 maybe they changed 'modal' to 'dialog' in the new 2.0 version? I don't know. Another post about that: stackoverflow.com/questions/18245984/… Hope it helps. — Bronzato
The object that gets added to the vm is actually __dialog__ in 2.0. So i use this.__dialog__.close(); to close the modal — Justin
@Justin: Is it official? I also see, that this.dialog is undefined and this.__dialog__ is object... Interesting, isn't that naming telling us, that property name can be changed anytime? — VikciaR
@VikciaR I haven't seen it in any official documentation. That object was the only one I saw when inspecting my modal vm. I'm not sure on the naming convention. — Justin

Alexander Preston Alexander Preston · Accepted Answer · 2013-04-03T16:29:48

You can add anything you want onto the dialogResult object or replace it entirely.

var buttonOk = function (dialogResult) {
    dialogResult.checkedValue = 'Cogema';
    this.modal.close(dialogResult);
}

You can then access the result from the dialog in your main view model like this:

var changeSender = function (item) {
    app.showModal('viewmodels/sender').then(function(dialogResult){
        // use dialogResult.checkedValue here
    });
};

Returning something from a Durandal modal dialog

1 Answers