Невозможно вызвать привязку данных для нокаута с использованием jQuery

Question

Я пишу плагин с использованием jQuery и нокаутом. У меня есть два переключателя. Я использую привязку данных для нокаута для проверки и снятия галочки с переключателя. Проблема в том, что, когда я пытаюсь снять галочку с помощью кнопки с помощью jQuery, она не обновляет свойство bind observable.

<input type="radio" data-bind="checked: selectedVal" name="1" value="fixedPrice"/> Fixed Price 
<input class="hn" type="radio" data-bind="checked: selectedVal" name="1" value="allowBiding"/> Allow Biding 
<pre data-bind="text:ko.toJSON($data,null,2)"></pre> 
<input type="button" id="button" value="Click Me" /> 

var onClick = function() { 
    $('.hn').prop('checked', true); 

}; 

$('#button').click(onClick); 

var ViewModel = function() { 
    var self = this; 
    self.selectedVal = ko.observable("fixedPrice"); 
    self.selectedVal.subscribe(function (val) { 
     console.log(val) 
    }); 
}; 

ko.applyBindings(new ViewModel()); 

0 См. Дополнительные характеристики this jsfiddle.

Answer 1

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

$('.hn').triggerHandler('click'); 

Или

$('.hn')[0].click(); 

Вот JsFiddle Demo

Answer 2

Welp! Не смешивайте KO и jQuery таким образом. Вы боевые Нокаут, не используя его. См. this earlier answer I wrote для очень похожей ситуации и расширенного объяснения.

Обратите внимание, что это, конечно, не ошибка, Jquery по умолчанию будет не триггерных событий DOM меняется, как это. Если вы настаиваете смешения Ко и JQuery этого пути, не забудьте сообщить другим, как это:

ko.applyBindings({ 
 
    isChecked: ko.observable(false), 
 
    onClick: function() { 
 
    $('.hn').prop('checked', true); 
 
    $('.hn').trigger('click'); 
 
    } 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
1. The radio button: <input type="radio" class="hn" data-bind="checked: isChecked"> 
 
<br> 
 
2. Trigger it with jQuery: <button data-bind="click: onClick">trigger</button> 
 
<hr> 
 
Debug info:<br><textarea data-bind="text: ko.toJSON($root)"></textarea>

Answer 3

JQuery и Knockout сражаются за контроль над видом. Если вы собираетесь использовать viewmodel, используйте viewmodel и не манипулируйте DOM, кроме как через viewmodel. У вас есть элемент viewmodel, который управляет переключателями, вам просто нужно его установить. Нокаут обеспечивает привязку click, поэтому вам не нужно jQuery, чтобы прикрепить это.

var ViewModel = function() { 
 
    var self = this; 
 
    self.selectedVal = ko.observable("fixedPrice"); 
 
    self.selectedVal.subscribe(function (val) { 
 
     console.log(val) 
 
    }); 
 
    self.setSelected = function() { 
 
     self.selectedVal('allowBiding'); 
 
    }; 
 
}; 
 

 
ko.applyBindings(new ViewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 
<input type="radio" data-bind="checked: selectedVal" name="1" value="fixedPrice" />Fixed Price 
 
<input type="radio" data-bind="checked: selectedVal" name="1" value="allowBiding" />Allow Biding 
 
<pre data-bind="text:ko.toJSON($data,null,2)"></pre> 
 

 
<input type="button" value="Click Me" data-bind="click:setSelected" />