Knockout.js 视图模型发生变化,但已发布站点上的复选标记未发生变化

Knockout.js viewmodel changes, but check marks don't change on published site

我正在使用使用 Knockout.js 进行界面处理的 Razor 页面。虽然视图模型更改了值,并且数据库在保存时正确存储了它们,但单击时复选标记不会更改。

我研究了类似的问题,发现 this answer。不幸的是,虽然使 Knockout 点击事件 return 为真确实允许复选标记在视觉上发生变化,而 运行 在 Visual Studio 中,标记在已发布的开发站点上没有变化。

复选框在 Razor 中定义为:

<div class="col-md-3">
     <label class="checkbox-inline" for="NeedsFurtherReview">
         <input id="NeedsFurtherReview" type="checkbox" data-bind="checked: $parent.NeedsFurtherReview, visible: !$parent.HasBeenProcessed(), click: $parent.MarkCheckToggled()" /> Further Review Needed
     </label>
 </div>
 <div class="col-md-3">
     <label class="checkbox-inline" for="PendingFinalization" data-bind="visible: !$parent.HasBeenProcessed()">
         <input id="PendingFinalization" type="checkbox" data-bind="checked: $parent.PendingFinalization, enable: $parent.CanBeProcessed(), visible: !$parent.HasBeenProcessed(), click: $parent.MarkCheckToggled()" /> Ready for Final Processing
     </label>
 </div>

复选框在 knockout.js 视图模型中对应为:

Self.PendingFinalization = ko.observable(pendingFinalization);

Self.CheckToggled = ko.observable(false);

Self.MarkCheckToggled = function () {
    Self.CheckToggled(true);
    return true;
};

奇怪的是它在 IE 中运行良好。当 MarkCheckToggled 中没有 return 并且在点击事件中被称为 $parent.MarkCheckToggled 时,它实际上在 IE 中事先工作正常。事实上,IE 现在会在单击框时在 Visual Studio 中抛出异常,但不会阻止它运行,或以任何可视方式在已发布的网站上抛出此错误。

Unhandled exception at line 4190, column 25 in http://localhost:26021/Scripts/knockout-3.4.0.debug.js

0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'apply'

提前感谢您的任何建议。我很乐意提供更多详细信息。这是我在 Stack Overflow 上的第一个问题,所以如果这个问题没有尽可能地呈现,我提前道歉。

click 绑定需要函数引用。所以你可能想要 click: $parent.MarkCheckToggled 而不是 click: $parent.MarkCheckToggled().

否则,linked 答案是正确的,您需要从您的点击处理程序return true

但也许更好的方法是 link 到 change 事件而不是 clickchange: $parent.MarkCheckToggled.

首先,澄清一下:knockout 作为一种客户端技术,并不关心部署到哪里。如果 运行 在本地和部署时存在差异,则差异必须在于客户端或客户端资产的服务方式。

至于在没有 return 的情况下在 IE 中正常工作,这取决于您所指的 IE 版本。

就您的错误而言:点击绑定需要一个函数引用,因此您应该将该部分更改为 click: $parent.MarkCheckToggled

但是,我认为有一种更容易理解的方法可以在您没有利用的情况下绑定到淘汰赛中的模型。您可以响应模型更改,而不是响应 UI 事件。在这种情况下,我会 subscribe 更改 NeedsFurtherReviewPendingFinalization observables 并触发 MarkCheckToggled 函数作为响应。