Question

这个问题暴露出一个：integrating 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/

有什么想法吗？

Answer 1

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

使用此代码，只会打开已打开对话框的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>

See fiddle

我希望它有所帮助。

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

1 个答案: