javascript - onSet 函数不会在 div 上触发

Question

我正在讨论如何通过自定义事件触发stickit onSet 事件。

在下面的代码中，colorChange事件正确发生并且所有绑定（stickit）事件也正常工作，但onSetevent.

有人能指出错误的地方在哪里吗？

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

Stickit 在表单元素上使用 2 路绑定，即input、textarea、input[type=checkbox]、input[type=radio]、select；对于其他所有东西，StickIt 都采用 1 方式绑定。

您应该在表单元素上指定color1 id。

Answer 2

尽管我找到了一种方法，但这有点hacky。

stickit 2way 绑定仅适用于表单元素和contenteditable="true"@mavarazy 提到的元素。

在调用之前stickit()将 div 设置为<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"]
  }
}

初始化后删除属性不让它成为真正的可编辑元素，它现在作为 2way 绑定工作。

Answer 3

我知道它已经晚了，但它可以帮助别人。更简单的方法是添加 updateModel: true

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