CODEWITHSUNDEEP
knockout.jskendo-ui
Mdb
Mdb

Reputation: 8556

Kendo-Knockout: bindings break when changing the value of the bind element

I will use the code of previously asked question with minor changes but the case is different:

Kendo-Knockout: Closing window breaks bindings

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 is an observable. On click of the button pop up is opened and I am instantiating the ProductionStatesList view model and assigning its value to myProductionStatesList. The first time the button is clicked everyting works fine. When You close the pop up and click the button again the bindings are broken and nothing happens. I am expecting on every click of the button the new instance of the ProductionStatesList to be rebound as myProductionStatesList is an observable. What am I missing?

jsfiddle:

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

Upvotes: 0

Views: 576

Answers (1)

RP Niemeyer
RP Niemeyer

Reputation: 114792

I think that your best bet in this case is to get to a point where you do not need to call ko.applyBindings multiple times.

A decent choice would be to create a view model that has an observable to hold your current ProductionStatesList and your openPopup function. Then, use the with binding around your editor.

The view model could just look like:

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

Here is a sample: http://jsfiddle.net/rniemeyer/wBCdK/

Upvotes: 2

Related Questions