onSet 函数不会在 div 上触发

Question

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

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

谁能指出错误的地方？

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 都采用一种方式绑定。

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

Answer 2

虽然我找到了实现它的方法，但它有点老套。

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

在调用 stickit() 之前将 div 设置为 <div contenteditable="true"></div> 和

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"]
  }
}

onSet 函数不会在 div 上触发

onSet function does not get fired on div

javascript

jquery

backbone.js

backbone-stickit