收听单选按钮取消选择事件而不知道按钮's上下文(骨干视图)

Listening for Radio Button Deselect Event Without Knowing that Button's Context (Backbone View)

本文关键字:上下文 视图 取消 单选按钮 选择 事件 按钮 不知道      更新时间:2024-05-01

我意识到取消选择时单选按钮未触发"更改"事件的问题已经在这个论坛上得到了广泛讨论(例如在这里)。标准的方法似乎是收听整个单选按钮组,这通常是有道理的。

然而,就我而言,我正在使用由任意数量的视图组成的Backbone构建菜单,每个视图都是一个具有相同名称值的单选按钮(例如<input type="radio" name="foo"/>。每个单选按钮都用主干模型实例化,我想为该模型的一个属性绑定一个setter,以便在选择/取消选择单选按钮时激发。我目前的解决方案是在实例化每个单选按钮的父视图中构建事件处理程序,但我不希望这样做,因为我不想保留对每个单选按钮视图。因此,具体的问题是:"是否有任何方法可以在不了解按钮上下文的情况下收听单个单选按钮的‘取消选择’事件。"提前感谢您的回复。

浏览器不提供事件,但您可以很容易地创建它:

var checkboxes = $('input[type=radio]:checked')
$('input[type=radio]')
  .click(function() {
    checkboxes.filter(':not(:checked)').trigger('deselect');
    checkboxes = $('input[type=radio]:checked')
  })

然后使用你只需添加

$('#mycheckbox').bind('deselect', function () {
    alert('Deselected');
}

请参阅http://jsfiddle.net/edvpt6au/3/

没有javascript事件可以提供该功能,正如您包含的链接中所讨论的那样。理由很充分!

单选按钮实际上是一个组,将它们分隔在多个主干视图中对我来说没有意义,这就像为选择的每个选项都有一个主干视图,然后想知道如何让它们了解彼此的状态!

所以。。。AFAIK,没有干净的方法。但很明显,你们总是可以绑定到这个$el.pparent().on("change",…),然后在事件处理程序中,将输入视图的值与旧值进行比较,以检测是否取消选择该值。您可以在父视图中有一个事件处理程序来保存父元素数据中的上一个值。从技术上讲,子视图不会真正意识到周围的子元素,更新模型的处理程序会在子视图中,但子视图需要意识到其容器(父视图),以便绑定到更改事件并获取旧值(以知道是否取消选择了子视图)。公平吗?