The return of something from the modal dialogue of Durandal

Question

I am developing an asp.net solution with a Durandal template.

I would like to use a modal dialog to select an element in a table and return to the main representation model of the selected element.

Here is what I still have:

On the main screen, I have a link (changer) that allows me to open a modal dialog:

Here is the my viewModel function, which is called when the link is clicked:

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

So, I open a dialog called sender .

The following is a sender view model:

 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 a view of the cancellator:

 <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 that I do not know how to identify the selected radio button and return it to the main view.

Any help is appreciated.

Thanks.

Answer 1

You can add whatever you want to the dialogResult object or completely replace it.

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

Then you can get the result in the dialog box of your main view model as follows:

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