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;
    }
}

well calling applyBindings multiple times is not allowed , to do that you must use cleanNode and re-apply bindings overall — super cool
Please improve your question: leave only the code necessary to understand the problem, and give a clearer explanation of how you run your code, what you expect it to do, and what it does instead,or what errors you get. The code in your question includes a lot of lines for handling the language, which are not relevant at all. That doesn't make it easy to answer the question. — JotaBe

Ryan Smythe Ryan Smythe · Accepted Answer · 2016-02-03T21:19:29

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.

Knockout binding in ASP.NET MVC view

1 Answers