Knockout with multiple values

Question

I'm a newbie when it comes to using knockout, I really want to maximize its use on the network I'm developing. But I'm having problems when it comes to the browser’s ability to listen to several user events. I believe that knockout implements a property called valueupdate. So far, I have only used "afterkeydown" and "blur". But I need my browser to listen to several events at the same time. The following are the user events that my browser should execute:

• When loading a page, I want the input fields to start checking on page loading.
• When blurring, I want input fields to be checked after losing focus.
• After pressing a key, I also want my fields to recheck themselves when the user presses a key.
• When sending, although my fields are not wrapped in a form, I still want to check my fields after the user clicks the "Save" button.

I am thinking of something like this:

<input data-bind="value:someObservable, valueUpdate:'blur' + 'afterKeyDown' + 'onLoad' + 'onClickOfSaveButton'" /> 

-> Something like this, although I know that this will lead to a syntax error, but I hope you understand my point.

I know this question is confused, but if you want more detailed information, please feel free to include it in your comment. I really need help here. Thanks.

Answer 1

I made a fiddle that demonstrates how the validity value of the fields:

• Loading via call explictly isValid
• when the value is changed by the parameter "valueUpdate: afterKeyDown"
• right before sending data by calling explictly isValid in the sending method.

View:

 <div> <input type="text" data-bind="value: name, valueUpdate : 'afterkeydown'" /> <br/> <button data-bind="click: submit">Submit</button> </div> 

JS:

 ko.validation.configure({ decorateElement: true, // add 'validationElement' class on invalid element }); var VM = function () { var self = this; self.name = ko.observable("0").extend({ minLength: 3 }); self.isValid = function () { self.name.valueHasMutated(); return self.name.isValid(); } self.submit = function () { if (self.isValid()) { // server call } }; }; var vm = new VM(); ko.applyBindings(vm); vm.isValid(); 

Watch the violin

I used knockout.validation to run validation tests.

Answer 2

I am always glad to see that the "newbie" decided to switch to KnockoutJS. Anything that can help save the world from detailed, custom solutions related to data binding is a wonderful thing.

To answer the question of how to disable multiple events in order to update the data binding value, you should write:

 <input data-bind="value:someObservable, valueUpdate: ['blur', 'afterKeyDown', 'onLoad']"/> 

In my case, I used bootstrap typeahead to select a value, but the data binding was not updated after the user made a selection from the drop-down help box. Looking at the source, I found this little hidden stone that was not mentioned in KO documents.

I am compressing a message to someone, “go read the source,” but if you are dealing with a brief case that is not covered in the documents, don't be afraid! I discovered many undocumented functions by doing this

source: https://github.com/knockout/knockout/blob/master/src/binding/defaultBindings/value.js

 ko.bindingHandlers['value'] = { 'init': function (element, valueAccessor, allBindingsAccessor) { // Always catch "change" event; possibly other events too if asked var eventsToCatch = ["change"]; var requestedEventsToCatch = allBindingsAccessor()["valueUpdate"]; var propertyChangedFired = false; if (requestedEventsToCatch) { // Allow both individual event names, and arrays of event names if (typeof requestedEventsToCatch == "string") requestedEventsToCatch = [requestedEventsToCatch]; ko.utils.arrayPushAll(eventsToCatch, requestedEventsToCatch); eventsToCatch = ko.utils.arrayGetDistinctValues(eventsToCatch); } .... truncated .... 

Depending on your familiarity with record bindings, it may be pretty obvious that the valueUpdate binding handles an array of events. Here they get the extra valueUpdate binding and store it in var requestedEventsToCatch . The following comment notes the logic of processing an array of events to update a value - in fact, they even use one event, such as "afterKeyDown" to ["afterKeyDown"]

Hope this helps!

Answer 3

You should check the textInput binding. This is the best way to properly listen to all kinds of events that may affect the value of the text input field.

 <input data-bind="textInput: userName" /> 

Unlike value bindings, textInput provides instant updates from the DOM for all types of user input, including autocomplete, drag-and-drop, and clipboard events.

http://knockoutjs.com/documentation/textinput-binding.html