0

以前に質問された質問のコードを少し変更して使用しますが、ケースは異なります。

Kendo-Knockout: ウィンドウを閉じるとバインディングが壊れる

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。ボタンが初めてクリックされたときは、すべて正常に動作します。ポップアップを閉じてボタンをもう一度クリックすると、バインディングが壊れて何も起こりません。ボタンをクリックするたびに、ProductionStatesList の新しいインスタンスがmyProductionStatesList 観測可能なものとして再バインドされることを期待しています。私は何が欠けていますか？

jsfiddle:

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

4

1 に答える 1

2

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/

于 2012-12-17T13:44:35.820 に答える