StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Always happy to see a 'newbie' decide to make the switch to KnockoutJS. Anything that can help rid the world of verbose, ad hoc data-binding solutions is a wonderful thing.</p> <p>To answer your question regarding how to key off multiple events to update your data-binding value, you would write:</p> <pre><code><input data-bind="value:someObservable, valueUpdate: ['blur', 'afterKeyDown', 'onLoad']"/> </code></pre> <p>In my case, I was using a bootstrap typeahead to select a value, but the data-binding was not being refreshed after the user made a selection from the dropdown suggestion box. After looking at the source, I found this little hidden gem that was not mentioned on the KO docs.</p> <p>I cringe telling anyone to "go read the source", but if you're dealing with a fringe case that isn't covered in the docs, <strong>don't be scared to!</strong> I've uncovered many undocumented features by doing so</p> <p>source: <a href="https://github.com/knockout/knockout/blob/master/src/binding/defaultBindings/value.js">https://github.com/knockout/knockout/blob/master/src/binding/defaultBindings/value.js</a></p> <pre><code>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 .... </code></pre> <p>Depending on your familiarity with writing bindings, it may be fairly apparent that the valueUpdate binding handles an array of events. Here they're getting the supplemental binding "valueUpdate" and storing it in <code> var requestedEventsToCatch </code>. The next comment marks the logic to handle an array of events to update the value on -- indeed they cast even a single event such as <code>"afterKeyDown"</code> to <code>["afterKeyDown"]</code></p> <p>Hope this helps!</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload