2

我希望有一个模态对话框出现，其中包含一些内容和按钮。对话框是否应该绑定到一些可观察的属性，对话框还必须有关闭按钮，一个在其主体内，另一个在右上角。我的主要目标是使用这些按钮关闭此模式表单，但对话框主体内的“取消”按钮无法按预期工作。

1）第一种方法：

在此示例中，对话框是使用静态对话框创建的，在“打开对话框”按钮上单击它会显示，如果单击右上角的 X 链接，它会关闭，但在“关闭”按钮单击时不会关闭，但是我设置了我的 observable为空。正如这篇精彩的解释中所描述的那样，我对这种方法非常确定。

摘自我的代码：

HTML:
<button data-bind="click: openDialog">Open dialog</button>
<div data-bind="with: dialogOpener">
    <div data-bind="dialog: { data: $data, options: { close: Close } }">
        <button data-bind="click: Save">Save</button>
        <button data-bind="click: Close">Cancel</button>
   </div>
</div>

JS:
self.dialogOpener = ko.observable();

self.openDialog = function () {             
    var data = {
        Save: function() {
                  alert('Saved');
              },
        Close: function() {
                  alert('Closed');
                  self.dialogOpener(null);
               }
        }

    self.dialogOpener(data);
}

完整的工作示例：http: //jsfiddle.net/cQLbX/

2) 第二种方法显示了我的对话框 html 是如何动态创建的，它的内容和结果与第一个示例相同。

摘自我的代码：

HTML:
<button data-bind="click: openDialog">Open dialog</button>

JS:
self.dialogOpener = ko.observable();

self.openDialog = function () {
    var element = "";
    element += '<div data-bind="with: $data">';
    element += '<div data-bind="dialog: { data: $data, options: { close: Close } }">';
    element += '<button data-bind="click: Save">Save</button>';
    element += '<button data-bind="click: Close">Cancel</button>';
    element += '</div>';
    element += '</div>';

    var data = {
        Save: function() {
            alert('Saved');
        },
        Close: function() {
            alert('Closed');
            self.dialogOpener(null);
        }
    }

    self.dialogOpener(data);

    ko.applyBindings(data, $(element)[0]);
}

完整的工作示例：http: //jsfiddle.net/6T3Ra/

我的问题是：

在这两个示例中，正文中的“取消”按钮都不起作用，对话框没有关闭，我做错了什么以及如何解决这个问题？

非常感谢！

4

2 回答 2

1

我不知道你是否使用了任何插件以及什么没有，但是在一个名为调试器的好东西的帮助下查看你的 js fiddle 示例 no2 是你没有明确告诉元素隐藏。对此的解决方案可能如下：

//If you look at E, E would be the ViewModel and X would be the jQuery Event Click
Close: function(e, x) {
   //from the event we have currentTarget which is the button that was pressed.
   //parentElement would be the first element, and the next parentElement was 
   //the modal in your demo. When we call hide() it hides the modal from 
   //which the button was pressed.
   $(x.currentTarget.parentElement.parentElement).hide();
   //left these as is from your example
   alert('Closed');
   self.dialogOpener(null);
}
于 2013-06-02T15:53:30.453 回答
1

对您的小提琴进行了一系列更改，可能不是您想要的方式，但是取消和 x 按钮现在都做同样的事情

http://jsfiddle.net/cQLbX/3/

<div data-bind="dialog: dialogOpener, dialogOptions: { autoOpen: false, close: Close, buttons: { 'Save': Save, 'Cancel': Close } }">
        <div data-bind='with: dialogContent'>
            <div data-bind="text: Test"></div>
        </div>
    </div>

我通常像这样构建我的对话，并且我已经取得了成功。

于 2013-06-02T16:37:58.087 回答