onSet 函数不会在 div 上触发

Posted 2023-02-24

【中文标题】onSet 函数不会在 div 上触发

【英文标题】：onSet function does not get fired on div

【发布时间】：2015-01-05 02:24:34

【问题描述】：

我正在讨论如何通过自定义事件触发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>

【参考方案1】：

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

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

【参考方案2】：

虽然我已经找到了一种方法，但这有点hacky。

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 绑定。

【参考方案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"]