javascript - getting KnockoutJs error You cannot apply bindings multiple times to the same element -

when page loads data calling getgenejsondata() , when database udpate call same method load new data , error "you cannot apply bindings multiple times same element"

here's code snips

    var geneviewmodel = null;      var gene = function (data) {     data = data || {};      var self = this;     self.genevalue = data.genevalue;     self.genecode = ko.protectedobservable(data.genecode);     self.genename = ko.protectedobservable(data.genename);     self.genecomments = ko.protectedobservable(data.genecomments);  };  var viewmodel = function (items) {     var self = this;     var newgene = { "genevalue": "", "genecode": ko.protectedobservable(null), "genename": ko.protectedobservable(null), "genecomments": ko.protectedobservable(null) };      self.genes = ko.observablearray(ko.utils.arraymap(items, function (data) {         return new gene(data);     }));  self.updategene = function (gene) {      getgenejsondata(); } }      function getgenejsondata() {     $.ajax({         type: "get",         url: urlpath + '/getgenes',         datatype: "json"     }).done(function (result) {         if (result) {             if (result.success) {                 var genedata = result.data;                      geneviewmodel = new viewmodel(genedata);                     ko.applybindings(geneviewmodel);              }          }     }); };      $(document).ready(function ($) {      getgenejsondata();  }); 

i not sure why i'm getting error on data reload. have remove bindings before applying them again?

you need apply bindings once. instead of creating new viewmodel ajax request, use same viewmodel , update properties.

i suggest applying bindings in document ready function , passing viewmodel update function. here how it:

var viewmodel = function(items) {     var self = this;     var newgene = {         "genevalue": "",         "genecode": ko.protectedobservable(null),         "genename": ko.protectedobservable(null),         "genecomments": ko.protectedobservable(null)     };      self.genes = ko.observablearray(ko.utils.arraymap(items, function(data) {         return new gene(data);     }));      //pass in view model here     self.updategene = function(gene) {         getgenejsondata(self);     } }      function getgenejsondata(viewmodel) {         $.ajax({             type: "get",             url: urlpath + '/getgenes',             datatype: "json"         }).done(function(result) {             if (result) {                 if (result.success) {                     var genedata = result.data;                     viewmodel.genes = result.data                  }              }         });     };  $(document).ready(function($) {     //apply bindings here     ko.applybindings(geneviewmodel);     getgenejsondata(); });