1

RPNiemeyer の kendo-knockout ライブラリを使用しています。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>

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.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();
    }

jsfiddle のコードは次のとおりです: http://jsfiddle.net/5Zkyg/40/

再現する手順：

1. ボタンをクリックします。ポップアップウィンドウが開きます。

2. 右上の画像からウィンドウを閉じます (画像がインポートされていないため、x ボタンは表示されません)。

これが機能しない理由を説明してください。解決策があれば大歓迎です。ありがとう！

4

1 に答える 1

2

主な問題は、要素が元のインスタンスにバインドされている間に、 の後続の呼び出しopenPopupが a の新しいインスタンスを作成してそれProductionStatesListを呼び出すことです。openPopup

1 つの解決策は、次のように関数の外にインスタンスを作成することです: http://jsfiddle.net/rniemeyer/bZF9k/

それ以外の場合、ProductionStatesListインスタンスの配列があり、Knockout ですべてを管理したい場合は、selectedProductionStatesListオブザーバブルを作成しwith、ウィンドウ内の領域の周りにバインディングを使用して、毎回再バインドされるようにすることをお勧めします。

于 2012-12-14T18:50:43.000 に答える