Question

当用户在两个单选按钮之间选择时，我正在使用骨干视图进行捕获。

以下是单选按钮的外观：

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。

所以我把它放在视图的事件部分：

'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();
        }
 }

第一次，它运作正常。但经过测试并单击“是”和“否”单选按钮后，它开始似乎随机显示并隐藏任一div。

Answer 1

单击时会检查单选按钮。用于绑定事件并访问值的选择器为'input[name=hasSpouse]:checked'

在某种思维方式中，单击单选按钮后会被选中。所以你的选择器不应该匹配。但是，backbone将事件处理程序委托给view元素。所以我想通过时间事件传播到视图元素，无线电被标记为已检查并匹配选择器，因此触发附加的处理程序。

另一个想法是我们可以选择在事件处理程序中使用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

1 个答案: