剑道敲除:更改绑定元素的值时绑定中断

Question

我将使用之前提出的问题的代码，并进行细微的更改，但情况有所不同：

剑道淘汰赛：关闭窗口会打破束缚

.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>

JavaScript：

    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.close = function () {
            self.isOpen(false);
        }
};
    var elementIsBound = function (elementId) {
                return !!ko.dataFor(document.getElementById(elementId));
            };

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

myProductionStatesList是可观察的。单击按钮弹出窗口时打开，我正在实例化ProductionStatesList视图模型并将其值分配给myProductionStatesList。第一次单击按钮时，每次都可以正常工作。当您关闭弹出窗口并再次单击按钮时，绑定已断开，没有任何反应。我希望每次单击按钮时，都会重新绑定生产状态列表的新实例，因为myProductionStatesList是可观察的。我错过了什么？

JSFIDDLE：

http://jsfiddle.net/bZF9k/15/

Answer 1

我认为在这种情况下

，您最好的选择是达到不需要多次调用ko.applyBindings的程度。

一个不错的选择是创建一个视图模型，该模型具有可观察性来保存您当前的ProductionStatesList和openPopup函数。 然后，在编辑器周围使用 with 绑定。

视图模型可能如下所示：

var viewModel = {
    myProductionStatesList: ko.observable(),
    openPopup: function() {
       var newList = new ProductionStatesList();
       this.myProductionStatesList(newList);
       newList.openPopup();
    }
};

下面是一个示例： http://jsfiddle.net/rniemeyer/wBCdK/