jQueryUI的对话框，在KnockoutJS

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

我希望它能帮助。