0

这个问题暴露了一个问题：integration jquery ui dialog with 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 并使其变得巨大。例如，我想在模板中使用对话框。

JSFiddle 样机在这里http://jsfiddle.net/YmQTW/8/

有什么想法吗？

4

1 回答 1

0

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

使用此代码，仅复制打开的对话框的 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>

见小提琴

我希望它有所帮助。

于 2013-07-02T05:50:28.317 回答