从 Durandal 模态对话框返回某些内容答案

【问题标题】：Returning something from a Durandal modal dialog从 Durandal 模态对话框返回某些内容
【发布时间】：2013-04-04 00:29:48
【问题描述】：

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

我想使用模态对话框在表格中选择一个元素，然后将所选元素返回到主视图模型。

这是我目前所拥有的：

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

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

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

于是我打开了名为sender 的对话框。

下面是sender的viewModel：

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>

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

非常感谢任何帮助。

谢谢。

【问题讨论】：

关于您的帖子的快速问题。在您的按钮中，好的，您如何/为什么可以访问 this.modal？
看看这个：durandaljs.com/documentation/Showing-Message-Boxes-And-Modals 有dialog.close(...) 但在我的代码中我使用modal.close。我仍在使用 Durandal 1.2，也许他们在新的 2.0 版本中将“模态”更改为“对话框”？我不知道。另一篇关于此的帖子：stackoverflow.com/questions/18245984/…希望对您有所帮助。
添加到 vm 的对象实际上是 2.0 中的__dialog__。所以我使用this.__dialog__.close(); 关闭模式
@Justin：是官方的吗？我还看到，this.dialog 是未定义的，而 this.__dialog__ 是对象......有趣的是，这个命名不是告诉我们，属性名称可以随时更改吗？
@VikciaR 我没有在任何官方文档中看到它。该对象是我在检查模态虚拟机时看到的唯一对象。我不确定命名约定。

标签： knockout.js durandal

【解决方案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
    });
};

【讨论】：