javascript - knockout.js "with"绑定(bind)和动态 html

Question

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

1)第一种方法:

在这个例子中对话框是用静态对话框创建的，在“打开对话框”按钮上点击它显示，如果点击右上角的X链接它会关闭，但它不会在“关闭”按钮点击时关闭，但是我将我的可观察对象设置为空。我非常确定这种方法，因为它在 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/

我的问题是:

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

非常感谢!

Answer 1

对你的 fiddle 进行了一系列更改，也许不是你想要的方式，但取消和 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>

我通常这样构建我的对话，并且我已经成功地使用了它们。