CODEWITHSUNDEEP
javascriptasp.net-mvcknockout.js
RobVious
RobVious

Reputation: 12915

Knockout + MVC - You cannot apply bindings multiple times to the same element

My MVC view: 

@model MG.ViewModels.Profile.ProfileDetailsViewModel
<div>
<h4>About Me</h4>
<!-- ko if: !isEditingAboutMe() -->
<p data-bind="text: aboutMe()">@Model.AboutMe</p>
@if (Model.CurrentUserCanEdit)
{
    <a data-bind="click: editAboutMe">edit</a>
}
<!-- /ko -->
<!-- ko if: isEditingAboutMe() -->
@Html.TextBoxFor(model => model.AboutMe, new { data_bind = "value: aboutMe" })
<a data-bind="click: saveAboutMe">save</a>
<a data-bind="click: cancelAboutMe">cancel</a>
<!-- /ko -->
</div>

<script type="text/javascript">ko.applyBindings(@Html.Raw(Json.Encode(Model)));</script>

My ProfileVm Javascript: 

function ProfileVm() {
var self = this;

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

I'm loading ProfileVm in Layout.cshtml via a bundle: 

    @Scripts.Render("~/bundles/viewmodels")

I'm calling ko.applyBindings() twice - once directly in my view to bind the MVC Model to knockout observables, and the other to bind the properties of the ProfileVm.

What am I doing wrong?

Upvotes: 2

Views: 11280

Answers (2)

Michael Best
Michael Best

Reputation: 16688

@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:

function ProfileVm(model) {
    var self = 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))));
})

Upvotes: 2

RP Niemeyer
RP Niemeyer

Reputation: 114792

You should not call ko.applyBindings on the same elements more than once, as it will potentially add multiple event handlers to the same elements and/or bind different data to the elements. In KO 2.3, this now throws an exception.

ko.applyBindings does accept a second argument that indicates the root element to use in binding.

So, it is possible to do something like:

<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

Upvotes: 7

Related Questions