顶部的 durandal 消息框关闭按钮答案

【问题标题】：durandal messagebox close button on top顶部的 durandal 消息框关闭按钮
【发布时间】：2014-03-18 08:29:35
【问题描述】：

默认durandal消息框是这样的：并命名为：messageBox.html

<div class="messageBox">
    <div class="modal-header">
        <h3 data-bind="html: title"></h3>z
    </div>
    <div class="modal-body">
        <p class="message" data-bind="html: message"></p>
    </div>
    <div class="modal-footer" data-bind="foreach: options">
        <button class="btn" data-bind="click: function () { $parent.selectOption($data); }, html: $data, css: { 'btn-primary': $index() == 0, autofocus: $index() == 0 }"></button>
    </div>
</div>

现在在这里，我想把 X 按钮放在标题右侧：

<div class="modal-header">
            <h3 data-bind="html: title"></h3>
            <a>X</a>
        </div>

所以我把 X 放在 modal-header 中，但我不知道应该在哪里写什么代码，所以当用户点击 X 时，弹出窗口将关闭。

messageBox.js 是这样的：

define(function() {
    var MessageBox = function(message, title, options) {
        this.message = message;
        this.title = title || MessageBox.defaultTitle;
        this.options = options || MessageBox.defaultOptions;
    };

    MessageBox.prototype.selectOption = function (dialogResult) {
        this.modal.close(dialogResult);
    };

    MessageBox.defaultTitle = '';
    MessageBox.defaultOptions = ['Ok'];

    return MessageBox;
});

【问题讨论】：

标签： javascript knockout.js durandal single-page-application

【解决方案1】：

你需要对函数关闭模态进行敲除绑定

<div class="modal-header">
     <h3 data-bind="html: title"></h3>
     <span data-bind="click: function () { $parent.close(); }>X</span>
</div>

而你的 JS 文件看起来像：

define(function() {
    var MessageBox = function(message, title, options) {
        this.message = message;
        this.title = title || MessageBox.defaultTitle;
        this.options = options || MessageBox.defaultOptions;
    };

    MessageBox.prototype.selectOption = function (dialogResult) {
        this.modal.close(dialogResult);
    };

    MessageBox.prototype.close = function () {
        this.modal.close();
    };

    MessageBox.defaultTitle = '';
    MessageBox.defaultOptions = ['Ok'];

    return MessageBox;
});

【讨论】：