Stickit：如何在每个模型后触发更改事件 -> 视图更改

Posted 2023-02-24

【中文标题】Stickit：如何在每个模型后触发更改事件 -> 视图更改

【英文标题】：Stickit: How to trigger a change event after every model -> view change

【发布时间】：2013-03-25 03:45:28

【问题描述】：

我有许多事件绑定到我的视图中的元素，但是当我使用stickit js 通过更改模型来更改视图中的值时，它不会触发onChange 事件。

有没有一种方法可以在模型中设置值之后触发当前模型的 onchange 事件：元素，而无需为每个绑定编写处理程序？这将适用于所有表单元素，输入/选择/文本区域。

我想避免对页面上的每个表单元素进行以下操作：

bindings: 
    '#foo': 
         observe: 'foo',
         afterUpdate: 'forceChange'
    ,
    '#bar': 
         observe: 'bar',
         afterUpdate: 'forceChange'
    ,
    ...
,

forceChange: function(el)  jQuery(el).change() 

【问题讨论】：

触发onChange的什么？一个 DOM 元素？为什么你的代码不能直接连接到模型的change 事件？

您需要更具体一点：当您说“它不会触发 onChange 事件”时，您到底在做什么？您（或 Stickit 代码）是否在致电 yourModel.set(something)？如果是这样，它是否使用silent 选项调用它，例如。 yourModel.set(something, silent:true)?如果没有，更改事件将被触发，因此要么您有另一个事件处理程序阻止它，要么set 没有发生。

为歧义道歉。当我调用 model.set('foo', 'bar') 时，绑定到该模型项的 DOM 元素的值会发生变化，但不会触发 onchange 方法。我已经尝试过使用 jQuery('element').val('new value') 并且它也不会触发更改事件。我不是试图触发模型更改事件，而是触发 DOM 元素更改事件。

【参考方案1】：

一种可能的技巧（仅适用于 0.6.3 版）是定义一个匹配所有元素的全局处理程序：

Backbone.Stickit.addHandler(
  selector: '*',
  afterUpdate: function($el) 
    $el.trigger('change');
  
);

由于处理程序按照定义的顺序与其他匹配的处理程序和绑定配置混合在一起，因此您不能在任何绑定中使用 afterUpdate 而不会覆盖这个全局的、全匹配的处理程序，因为绑定配置是最后混入。你可以阅读更多关于它的信息here。

【讨论】：

完美，谢谢。如果我有足够的代表，我会投票给你的答案！没想到星号！

【参考方案2】：

啊，那条评论澄清了问题。因此，在 javascript 中，当您“手动”更改输入值时（无论是通过 jQuery 还是通过someElement.value =），正如您所注意到的，浏览器不会触发更改事件。更改事件（以及与此相关的大多数其他事件）仅在响应 用户 操作时触发，而不是响应 Javascript。

幸运的是，正如您可以“手动”更改值一样，您也可以“手动”触发事件。在 jQuery 中，它的语法是：

$(yourElement).trigger('change');

如果您需要控制 e.target 之类的东西，您可以阅读 jQuery trigger 文档了解详细信息，但这是基本思想。

如果需要，您甚至可以将值更改和事件触发链接在一起：

$(yourElement).val('newValue').trigger('change');

【讨论】：

感谢您的回复。我希望在 Stickit 更新时全局调用更改事件。正如您在我的示例中看到的那样，我已经在使用 jQuery(el).change()，它将像 jQuery(el).trigger('change') 一样调用更改请求。 Stickit 可以代表我调用更改请求，而不是我必须在每个绑定中放置一个“afterUpdate”吗？