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

1

I am working with a Razor page that utilizes Knockout.js for the interface handling. While the viewmodel changes the values, and the database stores them correctly upon saving, the check marks do not change when clicked upon.

I researched into similar questions and found this answer. Unfortunately, while making the Knockout click event return true did allow the check marks to visually change while running in Visual Studio, the marks do not change on the published development site.

The check boxes are defined in Razor as:

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

The check boxes correspond in the knockout.js view model as:

Self.PendingFinalization = ko.observable(pendingFinalization);

Self.CheckToggled = ko.observable(false);

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

An oddity about this is that it works fine in IE. It actually worked fine in IE beforehand when there was no return from MarkCheckToggled and it was called as $parent.MarkCheckToggled in the click event. In fact, IE now throws an exception in Visual Studio when the box is clicked on, but it doesn't stop it from functioning, or throw this error on the published site in any visual way.

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'

Thank you in advance for any advice. I'll be glad to provide further detail. This is my first question on Stack Overflow, so I apologize in advance if this question is not presented as best as possible.

javascript
visual-studio
visual-studio-2013
knockout.js
asked on Stack Overflow Mar 15, 2017 by Evoker • edited May 23, 2017 by Community

2 Answers

1

First, just a clarification: knockout, being a client-side technology, does not care where it's deployed to. If there is a difference when running locally and being deployed, the difference must lie with the client or how your client-side assets are being served.

As far as working fine in IE without the return, that depends on the version of IE you're referring to.

As far as your error: the click binding expects a function reference, so you should change that part to click: $parent.MarkCheckToggled.

However, I think there is a more understandable way to approach binding to a model in knockout that you're not taking advantage of. Instead of responding to UI events, you can instead respond to model changes. In this case, I would subscribe to changes to the NeedsFurtherReview and PendingFinalization observables and fire the MarkCheckToggled function as a response.

answered on Stack Overflow Mar 15, 2017 by kmkemp
0

The click binding expects a function reference. So you'd likely want click: $parent.MarkCheckToggled and not click: $parent.MarkCheckToggled().

Otherwise, the linked answer is correct that you need to return true from your click handler.

But perhaps a better approach is to link to the change event instead of click: change: $parent.MarkCheckToggled.

answered on Stack Overflow Mar 15, 2017 by Michael Best

User contributions licensed under CC BY-SA 3.0