onSet function does not get fired on div

Question

I am stacking at how to fire stickit onSet event by custom event.

In the code below,colorChange event is properly occurring and all bindings(stickit) events work properly as well but onSet event.

Could someone point out where the wrong point is?

bindings: {
  '#color1': {
    observe: 'color1',
    update : function($el,val){
      $el.css("background-color",val);
    },
    onSet : function(){
    //never get fired
    },
    events : ["colorChange"]
  }
}

events : {
  "colorChange" : function(){
    //the event is occurring
  }
}

//somewhere

$("#color1").trigger("colorChange");

<!-- in the html -->
<div id="color1"></div>

Answer 1

this is bit hacky though I've found a way to make it.

stickit 2way binding works only on form element and element which has contenteditable="true" like @mavarazy mentioned.

before calling stickit() set the div into <div contenteditable="true"></div> and

bindings: {
  '#color1': {
    observe: 'color1',
    initialize : function($el){
      $el.removeAttr("contenteditable")
    },
    update : function($el,val){
      $el.css("background-color",val);
    },
    onSet : function(){
    //gets the event
    },
    events : ["colorChange"]
  }
}

delete the attribute not to let it real editable element after initializing and it works as 2way binding now.

Answer 2

Stickit uses 2 way binding on form elements, which are input, textarea, input[type=checkbox], input[type=radio], select; for everything else StickIt goes with 1 way binding.

You should specify color1 id on your form element.

Answer 3

I know it's late but it can help others. The easier way is just add updateModel: true

bindings: {
  '#color1': {
    observe: 'color1',
    update : function($el,val){
      $el.css("background-color",val);
    },
    onSet : function(){
    //gets the event
    },
    updateModel: true,
    events : ["colorChange"]
  }
}