CODEWITHSUNDEEP
jqueryasp.net-mvcdata-bindingknockout.jspostback
ruwanithanu
ruwanithanu

Reputation: 34

DataBinding issue with knockout

When I am try to bind data using knockout when the pageload it work fine. But when postback it throws an error "You cannot apply bindings multiple times to the same element." and also data repeating wrong way.

Script and the view as in below. from the controller it returns the required viewmodel.

Plz help me to fix this issue..

SCRIPT:

> var dataCollection = ko.observableArray();
> 
> function loadShiftSummary() {
>     ko.cleanNode($("#shiftInfo"));
>     $.ajax({
>         url: 'testurl',
>         type: 'post',
>         contentType: 'application/json',
>         success: function (data) {           
>    
>             dataCollection = ko.mapping.fromJS(data.rosterViewModels);
>             ko.applyBindings(dataCollection, document.getElementById("shiftInfo"));
>         }
>     }); }

VIEW :

>  <tbody data-bind="foreach: dataCollection">
>         <tr>
>             <td data-bind="text: Description"></td>
>           
>             @for (int i= 0; date < 30; i++)
>             {
>                 <td data-bind="text: $data.CountArray()[@i]"></td>
>             }
>         </tr> 
> </tbody>

thanks

Upvotes: 1

Views: 209

Answers (1)

Armand
Armand

Reputation: 10264

The reason for this is, is that ko.applyBindings(dataCollection, document.getElementById("shiftInfo")); is called more than once.

What I would suggest is in your document ready put this

ko.applyBindings(dataCollection, document.getElementById("shiftInfo"));

and remove it from the function

function loadShiftSummary() {

    $.ajax({
        url: 'testurl',
        type: 'post',
        contentType: 'application/json',
        success: function (data) {           

            dataCollection(ko.utils.unwrapObservable( ko.mapping.fromJS(data.rosterViewModels)));

        }
    }); 
}

ko.applyBindings should never be called more than once per page/section

Upvotes: 1

Related Questions