Knockout.js - Prevent change event binding to trigger when setting the value through the observable

Question

I have a DropDownList with the following bindings:

<select data-bind="value: DropDownValue, event: { change: OnChange }"> <option value="1">Val 1</option> /* and more */ </select>

The OnChange event is fired correctly when the user select a different value from the DropDownList.

The event is also fired when updating the value of the observable property using viewModel.DropDownValue(1).

What I'm trying to achieve, is to trigger the change event ONLY when the user sets the value through the UI.

Is it possible to block the change event when updating the value through the observable?

This is the JSFiddle example: https://jsfiddle.net/5ex5j7jL/3/

So I don't know why do you have to change the value inside your model while you don't want to ? your example has an error here is non-error example jsfiddle.net/5ex5j7jL/1 — Mateen Kajabadi
– Mateen Kajabadi, Commented Apr 5, 2016 at 13:49
@cl3m - I use the value binding because the DropDownList is already rendered on the HTML with all the necessary options. With the options binding, you have to provide an array of objects and let knockout create the HTML for you. — crushjz
– crushjz, Commented Apr 5, 2016 at 13:49
I have updated the JSFiddle example. @Matt.k - I want to change the model value, I don't want the change event to be triggered when I do it. (only when the user update the value through the UI) — crushjz
– crushjz, Commented Apr 5, 2016 at 13:51
looks like one way to do it is to use the isTrusted property of the event object — cl3m
– cl3m, Commented Apr 5, 2016 at 13:59

cl3m · Accepted Answer · 2016-04-05 14:13:36Z

Looks like one way to do it is to use the isTrusted property of the event object (true when the event was generated by a user action, false when generated by a script):

self.OnChange = function(viewModel, event) { if(event.isTrusted) { console.log("from dropdown"); return; } else { console.log("NOT from dropdown"); // do something } };

See updated fiddle

EDIT

Of course, you have to implement some king of mechanism if you want to prevent the user from changing the dropdown via the UI:

function ViewModel() { var self = this; self.DropDownValue = ko.observable(); self._original = null; self.OnChange = function(viewModel, event) { if(event.isTrusted) { // rollback the viewModel value to the old one viewModel.DropDownValue(self._original) return false } else { // keep a reference to the latest value for later rollback self._original = ko.unwrap(viewModel.DropDownValue) } }; };

See this updated fiddle

The isTrusted property is the way to go. But event passed to that function is a jQuery.event and does not expose directly the isTrusted property. We need therfore, use event.originalEvent.isTrusted
The property was exposed in the fiddle. I was sure there was a compatibility trick, well done finding it out!

Collectives™ on Stack Overflow

Knockout.js - Prevent change event binding to trigger when setting the value through the observable

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related