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:

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>

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.

Answer 1

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