Change event on select with knockout binding how can I know if it is a real change

Question

I am building a permissions UI  I have a list of permissions with a select list next to each permission  The permissions are represented by an observable array of objects which are bound to a select list    lt div data-bind  foreach  permissions  gt        lt div class  permission row  gt             lt span data-bind  text  name  gt  lt  span gt             lt select data-bind  value  level  event   change   parent permissionChanged   gt                      lt option value  0  gt  lt  option gt                      lt option value  1  gt R lt  option gt                      lt option value  2  gt RW lt  option gt              lt  select gt         lt  div gt    lt  div gt    Now the problem is this  the change event gets raised when the UI is just populating for the first time  I call my ajax function  get the permissions list and then the event get raised for each of the permission items  This is really not the behavior I want  I want it to be raised only when a user really picks out a new value for the permission in the select list  how can I do that

User · Answer

Here is a solution that may help with this strange behaviour. I couldn't find a better solution than place a button to manually trigger the change event.

EDIT: Maybe a custom binding like this could help:

ko.bindingHandlers.changeSelectValue = {

   init: function(element,valueAccessor){

        $(element).change(function(){

            var value = $(element).val();

            if($(element).is(":focus")){

                  //Do whatever you want with the new value
            }

        });

    }
  };

And in your select data-bind attribute add:

changeSelectValue: yourSelectValue

User · Answer

Create js component define        Magento Ui js form element select        mage translate     function  AbstractField   t         use strict        return AbstractField extend           defaults                imports                    update   checkout steps shipping-step shippingAddress shipping-address-fieldset country id value                             modules                    vat id        parentName   vat id                                                     Initializes UISelect component                         returns  UISelect  Chainable                      initialize  function                  this  super                this vat id   visible false               return this                     update  function  value                if value     GB                    this vat id   visible true                else                  this vat id   visible false

User · Answer

This is just a guess  but I think it s happening because level is a number  In that case  the value binding will trigger a change event to update level with the string value  You can fix this  therefore  by making sure level is a string to start with   Additionally  the more  Knockout  way of doing this is to not use event handlers  but to use observables and subscriptions  Make level an observable and then add a subscription to it  which will get run whenever level changes

User · Answer

I use this custom binding  based on this fiddle by RP Niemeyer  see his answer to this question   which makes sure the numeric value is properly converted from string to number  as suggested by the solution of Michael Best    Javascript   ko bindingHandlers valueAsNumber         init  function  element  valueAccessor  allBindingsAccessor            var observable   valueAccessor                interceptor   ko computed                   read  function                          var val   ko utils unwrapObservable observable                       return  observable     observable   toString     observable                                        write  function  newValue                        observable newValue   parseInt newValue  10    newValue                                      owner  this                         ko applyBindingsToNode element    value  interceptor                Example HTML    lt select data-bind  valueAsNumber  level  event   change   parent permissionChanged    gt       lt option value  0  gt  lt  option gt       lt option value  1  gt R lt  option gt       lt option value  2  gt RW lt  option gt   lt  select gt

User · Answer

I had a similar problem and I just modified the event handler to check the type of the variable  The type is only set after the user selects a value  not when the page is first loaded   self permissionChanged   function  l        if  typeof l     undefined                           This seems to work for me

User · Answer

Try this one   self GetHierarchyNodeList   function  data  index  event        debugger      if  event type     change             return                    event type     change  event type     load

User · Answer

use this   this permissionChanged   function  obj  event         if  event type     load

User · Answer

If you use an observable instead of a primitive value  the select will not raise change events on initial binding  You can continue to bind to the change event  rather than subscribing directly to the observable

User · Answer

If you are working using Knockout  use the key functionality of observable functionality knockout  Use ko computed   method and do and trigger ajax call within that function

User · Answer

Actually you want to find whether the event is triggered by user or program   and its obvious that event will trigger while initialization   The knockout approach of adding subscription won t help in all cases  why because in most of the model will be implemented like this   init the model with undefined data   just structure   actual KO initilization  update the model with initial data   logical init like load JSON   get data etc  User interaction and updates   The actual step that we want to capture is changes in 3  but in second step subscription will get call   So a better way is to add to event change like      lt select data-bind  value  level  event   change   parent permissionChanged   gt    and detected the event in permissionChanged function   this permissionChanged   function  obj  event       if  event originalEvent      user changed      else      program changed

User · Answer

Quick and dirty  utilizing a simple flag   var bindingsApplied   false   var ViewModel   function                     this permissionChanged   function                ignore  if flag not set         if   flag  return                             ko applyBindings new ViewModel     bindingsApplied   true     done with the initial population  set flag to true   If this doesn t work  try wrapping the last line in a setTimeout   - events are async  so maybe the last one is still pending when applyBindings   already returned

[knockout.js] Change event on select with knockout binding, how can I know if it is a real change?

Examples related to knockout.js