knockout.js - 从 Durandal 模态对话框返回某些内容

Question

我使用 Durandal 模板开发了一个 asp.net 解决方案。

我想使用模态对话框来选择表格中的元素并将所选元素返回到主视图模型。

这是我到目前为止所拥有的：

在主视图上，我有一个链接(changer)允许我打开模式对话框：

这是单击链接时调用的 viewModel 的函数：

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

所以我打开名为sender.

下面是 viewModel 的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;
});

以下是“发件人”的视图：

<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>

我的问题是我不知道如何识别选定的单选按钮并将其返回到主视图。

非常感谢任何帮助。

谢谢。

Answer 1

您可以在 dialogResult 对象上添加任何您想要的内容或完全替换它。

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

然后，您可以从主视图模型中的对话框访问结果，如下所示：

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