Knockout.js - prevent change event binding from firing when value is set via observable

crush

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>

When the user selects a different value from the DropDownList, the OnChange event is fired correctly.

This event is also fired when used to update the value of an observable property viewModel.DropDownValue(1).

What I'm trying to achieve is to fire the change event only when the user sets the value through the UI.

Is it possible to prevent change event when value is updated via observable?

Here is a JSFiddle example : https://jsfiddle.net/5ex5j7jL/3/

cl3m

Like what a method looks like to do is use the isTrustedproperty of the eventobject ( truewhen manipulated by the user, the event is generated, generated falseby the script):

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

Check out the updated fiddle

edit

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

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

Related

on-change event not firing correctly when binding value

Enyang I have this html code: <textarea id="text-to-convert" on-change="change" value="{{text}}"></textarea> and this dart code: import "dart:html"; import 'package:polymer/polymer.dart'; @CustomTag('dictionary-converter') class DictionaryConverter extends P

knockout change binding event

username Currently, I can't fire a bind event that depends on the result of another bind event in the knockout. In the example below, a value is provided in the "available" input, when the "condition1" input is populated with a value such as 22, the "available

knockout change binding event

username Currently, I can't fire a bind event that depends on the result of another bind event in the knockout. In the example below, a value is provided in the "available" input, when the "condition1" input is populated with a value such as 22, the "available

knockout change binding event

username Currently, I can't fire a bind event that depends on the result of another bind event in the knockout. In the example below, a value is provided in the "available" input, when the "condition1" input is populated with a value such as 22, the "available

Prevent event from firing when scrolling TVertScrollBox

Stan Normally, event functions are not fired from the scrollbox's child components when the content of the "scrollbox" is scrolled, such as in a native application. But in FireMonkey, if the TVertScrollBox contains child elements like TRectangle (I want to use

Prevent event from firing when scrolling TVertScrollBox

Stan Normally, event functions are not fired from the scrollbox's child components when the content of the "scrollbox" is scrolled, such as in a native application. But in FireMonkey, if the TVertScrollBox contains child elements like TRectangle (I want to use

About data binding by knockout js and value change

Thomas There are two textboxes and a span bound by culling. The example I got is easy to understand. Here is the code. <p>First name: <input data-bind="value: firstName" /></p> <p>Last name: <input data-bind="value: lastName" /></p> <h2>Hello, <span data-bind=

About data binding by knockout js and value change

Thomas There are two textboxes and a span bound by culling. The example I got is easy to understand. Here is the code. <p>First name: <input data-bind="value: firstName" /></p> <p>Last name: <input data-bind="value: lastName" /></p> <h2>Hello, <span data-bind=

About data binding by knockout js and value change

Thomas There are two textboxes and a span bound by culling. The example I got is easy to understand. Here is the code. <p>First name: <input data-bind="value: firstName" /></p> <p>Last name: <input data-bind="value: lastName" /></p> <h2>Hello, <span data-bind=