Использование backbone.js, обнаружение события переключателя и отображение или скрытие divs

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> 

Две дивы либо показаны или скрыты в зависимости от щелкает ли пользователь «да» или переключатель «нет».

Так что я положил это раздел события зрения:

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

А вот функция, которая должна заботиться о бегах и показать различные Дивы секции.

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'

В способе мышления переключатель переключателя выбирается после его нажатия. Поэтому ваш селектор не должен совпадать. Но позвоночник делегирует обработчики событий элементу представления. Поэтому, по моему мнению, к тому времени, когда событие распространяется до элемента вида, радио помечено как отмечено и соответствует селектору, поэтому запускается связанный обработчик.

Другая мысль заключается в том, что у нас есть возможность предотвратить поведение по умолчанию, используя 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>