Jquery ui JQueryUI对话框作为KnockoutJS中的可绑定模板

这个问题暴露了一个问题：

我有一个包含如下项目数组的模型：

var viewModel = {
    items: ko.observableArray([])
}

viewModel.items.push(new DialogModel("title 1"));
viewModel.items.push(new DialogModel("title 2"));
viewModel.items.push(new DialogModel("title 3"));

接下来，我使用

foreach

语句在标记中显示这些项

<div data-bind="foreach: items">
    <div data-bind="text: title"></div>
    <button data-bind="click: open">Open</button>
    <button data-bind="click: close" >Close</button>
</div>

打开
接近

我需要在单击按钮时显示JQueryUI对话框，该对话框应绑定到ItemModel实例。 我不想在循环中包含对话框代码，因为它是在结果DOM中复制的，并使其巨大。例如，我想使用模板中的对话框

我在这里做模型

---

有什么想法吗？

您可以创建一个只包含打开的对话框的数组，并将该数组绑定到模板

使用此代码，仅复制打开对话框的dom

var DialogModel = function (title) {
    var self = this;
    self.title = ko.observable(title);
    self.isOpen = ko.observable(false);
    self.open = function () {
        viewModel.shownDialogs.push(self);
        setTimeout(function () { self.isOpen(true); }, 0);
    };
    self.close = function () {
        this.isOpen(false);
    };
    self.isOpen.subscribe(function () {
        if(self.isOpen() === false)
            viewModel.shownDialogs.remove(self);
    })
};

var viewModel = {
    items: ko.observableArray([]),
    shownDialogs: ko.observableArray([]),
};

观点：

<div data-bind="foreach: shownDialogs">
    <div data-bind="template : 'tmpl'"></div>
</div>

---

我希望这会有所帮助。

我不喜欢增加阵列的想法，而且您的实现存在两个问题：1。显示在位的对话框（不在屏幕中间），2。对话框按钮关闭不起作用。但最后我发现了这个问题，这里的工作示例：