Knockout binding in ASP.NET MVC view

Question

In my application we are fetching a json data from the ASP.NET MVC method. And binding view using data-bind. At present I am using Knockout JavaScript library v2.2.1 and Knockout Mapping plugin v2.3.5.

So whenever I load a partial view, I have to call same binding method again to bind properties in the partial view.

So if I update knockout library to latest one and call binding method again it throws the following error:

Uncaught Error: You cannot apply bindings multiple times to the same element.

Is there any way that we call binding method once and after that bind properties in the partial view without calling binding method? or what I have to change for using new library version?

Method I am using at present to bind data and call every time when I load a partial view

 function getResourceFile(CallBack) { var Menu = function (data) { var self = this; ko.mapping.fromJS(data, {}, self); }; if (typeof localStorage === 'object') { try { // Geeting language and localize application on this behalf STARTED var lang = localStorage.getItem('lan'); var userLang = ''; if (lang === null || lang === 'undefined' || lang === '') { userLang = window.navigator.language || window.navigator.userLanguage; if (typeof userLang == 'undefined') userLang = "en"; } else { userLang = lang; } //userLang = "en";//comment this if (userLang.toString().length == 2) { if (userLang == 'de') { CurrentLocale = "de-DE"; } else { CurrentLocale = "en-US"; } } var l_lang = $.trim(userLang.substr(0, 2)); var currentURL = document.URL; if (currentURL.indexOf("SelectApp/de") != -1) { userLang = 'de'; CurrentLocale = "de-DE"; l_lang = 'de'; } else if (currentURL.indexOf("SelectApp/en") != -1) { userLang = 'en'; CurrentLocale = "en-US"; l_lang = 'en'; } var jsonName = endpoints.CPRes + l_lang; localStorage.setItem('lan', userLang); $.getJSON(jsonName, function (data) { LocalizationViewModel = data; ko.applyBindings(new Menu(data)); CallBack && CallBack(); }); } catch (e) { Storage.prototype._setItem = Storage.prototype.setItem; Storage.prototype.setItem = function () { }; alert('Your web browser does not support storing settings locally. In Safari, the most common cause of this is using "Private Browsing Mode". Some settings may not save or some features may not work properly for you.'); } } } function BindDataViewModel() { if (LocalizationViewModel === null || LocalizationViewModel === 'undefined' || LocalizationViewModel === '') { getResourceFile(); } else { //var localdeferred = $.Deferred(); var t = setTimeout(function () { ko.applyBindings(LocalizationViewModel); // localdeferred.resolve(); }, 300); //return localdeferred; } } 

Answer 1

Rather than binding to the entire screen, you can specify a DOM element to bind to as the second parameter of ko.applyBindings

To avoid "Uncaught Error: You cannot apply bindings multiple times to the same element." you can specify an element id on your partial for the data to bind to

ko.applyBindings(LocalizationViewModel, document.getElementById(elementId)

Where elementId is the unique id of an element on your partial view.