Knockout + Mvc - You Cannot Apply Bindings Multiple Times To The Same Element

My MVC view: @model MG.ViewModels.Profile.ProfileDetailsViewModel

About Me

<div id="left">
   ....
</div>

<div id="right">
   ....
</div>

Then, you would bind like:

ko.applyBindings(leftViewModel, document.getElementById("left"));
ko.applyBindings(rightViewModel, document.getElementById("right"));

If you have a scenario where the elements actually overlap, then you would have to do something like this: http://www.knockmeout.net/2012/05/quick-tip-skip-binding.html

Solution 2:

@RPNiemeyer has provided an excellent explanation of the problem. But I think that instead of trying to apply two view models, the simpler solution is to combine your view models into one. Something like this:

functionProfileVm(model) {
    varself = this;
    self.aboutMe = ko.observable(model.AboutMe);

    self.saveAboutMe = function() {
        self.isEditingAboutMe(false);
    };

    self.cancelAboutMe = function() {
        self.isEditingAboutMe(false);
    };

    self.isEditingAboutMe = ko.observable(false);
    self.editAboutMe = function() {
        self.isEditingAboutMe(true);
    };

}

$(document).ready(function () {
    ko.applyBindings(new ProfileVm(@Html.Raw(Json.Encode(Model))));
})

Share