Knockout.js 剑道击倒：关闭窗口会破坏绑定

我正在使用RPNiemeyer的剑道淘汰库。我有一个按钮，onclick实例化一个javascript对象，将一个div绑定到该对象，并打开一个弹出窗口。当我从右上角的x按钮关闭窗口时（我没有导入图像，也没有在小提琴中正确显示），绑定被破坏，按钮不会再次打开窗口。这是我的html：

<button onclick="openPopUp()">OpenPopUp</button>

<div id="productionStates" class="hidden">
    <div data-bind="kendoWindow: { isOpen: isOpen, title:'States', center:true, width: 600, height: 150, modal: true, resizable: false, actions: ['Maximize', 'Close'] }" >
        <fieldset>
            <legend>Change state:</legend>
            <table>
                <tr data-bind="foreach: productionStates">
                    <td><button class="k-button" data-bind="value: ProductionState, text: ProductionState" /></td>
                </tr>
            </table>
        </fieldset>
    </div>

</div>

以下是JSFIDLE中的代码：

复制步骤：

1.单击按钮。弹出窗口打开

2.从右上角的图像关闭窗口（由于未导入图像，x按钮不可见）

---

请解释这不起作用的原因，我们将非常感谢任何解决方案。谢谢

主要问题是对

openPopup

的后续调用正在创建

ProductionStatesList

的新实例，并在其上调用

openPopup

，而元素绑定到原始实例

一种解决方案是在函数外部创建实例，如：

---

否则，如果您有一个

ProductionStatesList

实例数组，并且希望使用Knockout管理整个事件，那么您可能希望创建一个

selectedProductionStatesList

可观察的，并在窗口内的区域周围使用带

绑定的
，以便每次都能恢复
 不幸的是，第一个解决方案需要对我的案例起作用。能否用小提琴展示一下你的第二个建议。谢谢。我重构了代码，在函数外部创建了实例。问题是实例依赖于另一个对象，我过去常常在实例的构造函数中传递该对象。因此，现在我使用空构造函数初始化ProductionStatesList，并在每次调用openPopUp函数时使用依赖对象作为参数显式调用initialize方法。也许这不是最好的解决方案，但在这种情况下，这是最适合我的解决方案，我现在就不谈了。再次感谢你！你的反馈是无价的。好吧，如果有什么东西仍然在工作，让我知道或得到它在小提琴！
var ProductionStatesList = function() {
    var
        self = this;

    ProductionStatesList.prototype.productionStates =
        ko.observableArray([ { ProductionState: ko.observable("Pending") } ]);

        ProductionStatesList.prototype.openPopUp = function () {
            self.isOpen(true);
        };     

        ProductionStatesList.prototype.isOpen = ko.observable(false);
        ProductionStatesList.prototype.openPopUp = function () {
                    self.isOpen(true);                    
                };
        ProductionStatesList.prototype.close = function () {
            self.isOpen(false);
        }
};
    var elementIsBound = function (elementId) {
                return !!ko.dataFor(document.getElementById(elementId));
            };

    var openPopUp = function(){
        var productionStatesList = new ProductionStatesList();
        if (!elementIsBound("productionStates")){
            ko.applyBindings(productionStatesList, document.getElementById("productionStates"));
        }

        productionStatesList.openPopUp();
    }