从Durandal模态对话框中返回一些东西

时间:2013-04-03 13:39:15

标签: knockout.js durandal

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

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

这是我到目前为止所做的:

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

enter image description here

以下是单击链接时调用的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;
});

以下是'theder'的观点:

<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

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

非常感谢任何帮助。

感谢。

1 个答案:

答案 0 :(得分:7)

您可以将任何想要的内容添加到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
    });
};