javascript - Knockout.js View 模型发生更改，但已发布网站上的复选标记没有更改

Question

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

我研究了类似的问题并发现this answer 。不幸的是，虽然使 Knockout 单击事件返回 true 确实允许复选标记在 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 View 模型中对应如下:

Self.PendingFinalization = ko.observable(pendingFinalization);

Self.CheckToggled = ko.observable(false);

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

奇怪的是它在 IE 中运行良好。实际上，当 MarkCheckToggled 没有返回并且在单击事件中调用 $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 上的第一个问题，因此，如果这个问题没有得到尽可能好的呈现，我提前表示歉意。

Answer 1

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

至于在 IE 中正常工作而不返回，这取决于您所指的 IE 版本。

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

但是，我认为有一种更容易理解的方法来绑定(bind)到 knockout 中的模型，但您没有利用它。您可以响应模型更改，而不是响应 UI 事件。在这种情况下，我会 subscribe对 NeedsFurtherReview 和 PendingFinalization 可观察量的更改并触发 MarkCheckToggled 函数作为响应。