挖空 + MVC - 不能将绑定多次应用于同一元素

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

本文关键字：应用于 元素 绑定 MVC 不能 挖空      更新时间：2023-09-26

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

我正在通过捆绑包在 Layout.cshtml 中加载 ProfileVm： 

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

我调用 ko.applyBindings（） 两次 - 一次直接在我看来将 MVC 模型绑定到挖空可观察量，另一个绑定 ProfileVM 的属性。

我做错了什么？

您不应该多次调用同一元素上的ko.applyBindings，因为它可能会向相同的元素添加多个事件处理程序和/或将不同的数据绑定到元素。在 KO 2.3 中，这现在会引发异常。

ko.applyBindings接受第二个参数，该参数指示要在绑定中使用的根元素。

因此，可以执行以下操作：

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

然后，您将像这样绑定：

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

如果你有一个元素实际重叠的场景，那么你将不得不做这样的事情：http://www.knockmeout.net/2012/05/quick-tip-skip-binding.html

@RPNiemeyer提供了对问题的极好解释。但我认为，与其尝试应用两个视图模型，更简单的解决方案是将您的视图模型合并为一个。像这样：

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))));
})
相关文章：