Question

我希望有一个模态对话框，其中包含一些内容和按钮。对话框应该绑定到某个可观察属性，对话框也必须有关闭按钮，一个在其体内，另一个在右上角。我的主要目的是用这些按钮关闭这个模态形式，但是＆＃34;取消＆＃34;对话框内部的按钮没有按预期工作。

1）第一种方法：

在此示例中，使用静态对话框创建对话框，在＆＃34;打开对话框＆＃34;按钮单击它显示，如果点击右上角的X链接它会关闭，但它不会关闭＆＃34;关闭＆＃34;按钮单击，但我将我的observable设置为null。我对这种方法非常肯定，正如this brilliant explanation中所描述的那样。

摘自我的代码：

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/

我的问题是：

在两个例子中＆＃34;取消＆＃34;身体内的按钮不起作用，对话框不关闭，我做错了什么以及如何解决这个问题？

非常感谢！

Answer 1

我不知道你是否使用任何插件而不是，但是在一个叫做调试器的好东西的帮助下查看你的js小提琴例子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);
}

Answer 2

对你的小提琴做了一些改变，也许不是你想怎么做，但取消和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>

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

knockout.js“with”绑定和动态HTML

2 个答案: