使用 backbone.js，检测单选按钮事件并显示或隐藏 div

Question

我正在使用 backbone 视图来捕获用户在两个单选按钮之间进行选择的时间。

单选按钮如下所示：

Do you have a spouse?
[ ] Yes
[ ] No

和 HTML:

<span>Do you have a spouse?</span>
<input type="radio" name="hasSpouse" value="yes">Yes
<br/>
<input type="radio" name="hasSpouse" value="no">No

<div class="hasSpouseYes" style="display:none;">Awesome!</div>
<div class="hasSpouseNo"  style="display:none;">That's too bad</div>

显示或隐藏两个 div 取决于用户是单击 'yes' 还是 'no' 单选按钮。

所以我把这是视图的事件部分：

'click input[name=hasSpouse]:checked': 'hasSpouseEvent',

这里是应该负责隐藏和显示各种 div 部分的函数。

 hasSpouseEvent: function () {
        var val = $('input[name=hasSpouse]:checked').val();
        if (val === 'yes') {
            this.$('.hasSpouseYes').show();
            this.$('.hasSpouseNo').hide();
        } else {
            this.$('.hasSpouseYes').hide();
            this.$('.hasSpouseNo').show();
        }
 }

第一次使用，效果很好。但是在对其进行测试并单击 'yes' 和 'no' 单选按钮之后，它似乎开始随机显示和隐藏 div.

Answer 1

单击单选按钮时选中它。您用来绑定事件和访问值的选择器是 'input[name=hasSpouse]:checked'

从某种意义上说，单选按钮被点击后变成选中状态。所以你的选择器不应该匹配。但是 backbone 将事件处理程序委托给视图元素。所以我想当事件传播到视图元素时，无线电被标记为选中并匹配选择器，因此触发附加的处理程序。

另一个想法是我们可以选择在事件处理程序中使用 event.preventDefault() 来防止默认行为。因此，理想情况下，默认行为应该在执行所有处理程序之后发生。同样在这种情况下，事件没有直接附加到元素。

由于实现方式的原因，您可能会在某些浏览器中遇到错误行为。

为了安全起见，最好使用选择器 input[name="hasSpouse"] 并从事件对象访问被点击的元素，如下所示：

var View = Backbone.View.extend({
   el: '#form',
   events: {
     'click input[name="hasSpouse"]': 'hasSpouseEvent',
   },
   hasSpouseEvent: function(event) {
     $this = $(event.target);
     this.$('.hasSpouseYes')[$this.val() == 'yes' ? 'show' : 'hide']();
     this.$('.hasSpouseNo')[$this.val() == 'no' ? 'show' : 'hide']();
   }
 });

 var view = new View();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script>
<div id="form"> <span>Do you have a spouse?</span>

  <input type="radio" name="hasSpouse" value="yes">Yes
  <br/>
  <input type="radio" name="hasSpouse" value="no">No
  <div class="hasSpouseYes" style="display:none;">Awesome!</div>
  <div class="hasSpouseNo" style="display:none;">That's too bad</div>
</div>

使用 backbone.js，检测单选按钮事件并显示或隐藏 div

Using backbone.js, detect radio button event and show or hide divs

javascript

jquery

backbone.js

backbone-events

backbone-views