Связывание нокаутом всегда возвращает пустую строку

Question

Хорошо, я обнаружил проблему, но не решение. Если я использую следующий код вместо этого, то все работает правильно:

<div class="col-xs-2"> 
    <div> 
     <label> 
      <input type="radio" name="timestamp" id="option1" class="btn btn-default" value="L" data-bind="checked: chosenCompare, event: {click: conditionChange}">L</input> 
     </label> 
     <label> 
      <input type="radio" name="timestamp" id="option2" class="btn btn-default" value="E" data-bind="checked: chosenCompare, event: {click: conditionChange}">E</input> 
     </label> 
     <label> 
      <input type="radio" name="timestamp" id="option3" class="btn btn-default" value="M" data-bind="checked: chosenCompare, event: {click: conditionChange}">M</input> 
     </label> 
    </div> 
</div> 

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

Оригинальный пост ниже ...

У меня есть следующий фрагмент шаблона, который использует Knockout, наряду с некоторыми Bootstrap:

<div class="col-xs-3"> 
    <select class="form-control" 
      data-bind="options: $parent.availableChannels(), 
      optionsCaption: 'Choose one...', 
      value: chosenChannel, event: {change: $parent.conditionChange}"></select> 
</div> 
<div class="col-xs-2"> 
    <div class="btn-group" data-toggle="buttons"> 
     <label class="btn btn-primary"> 
      <input type="radio" name="timestamp" id="option1" class="btn btn-default" value = "L" data-bind="value: chosenCompare, event: {change: $parent.conditionChange}">L</input> 
     </label> 
     <label class="btn btn-primary"> 
      <input type="radio" name="timestamp" id="option2" class="btn btn-default" value = "E" data-bind="value: chosenCompare, event: {change: $parent.conditionChange}">E</input> 
     </label> 
     <label class="btn btn-primary"> 
      <input type="radio" name="timestamp" id="option3" class="btn btn-default" value = "M" data-bind="value: chosenCompare, event: {change: $parent.conditionChange}">M</input> 
     </label> 
    </div> 
</div> 
<div class="col-xs-2">      
    <input id="number-picker" type="text" value="" name="number-picker" style="text-align: center" data-bind="value: chosenNumber, event: {change: $parent.conditionChange}" > 
</div> 

VM.model.channelCondition = function channelCondition(data) { 
    var o = this 
    o.base = VM.model.condition; 
    o.base(data); 
    o.chosenChannel = ko.observable(); 
    o.chosenCompare = ko.observable(); 
    o.chosenNumber = ko.observable(); 
    o.isReady = function() { 
    return o.chosenChannel() !== undefined && o.chosenCompare() !== undefined && o.chosenNumber() !== undefined; 
    } 
} 

VM.conditionChange = function(data, event) { 
    console.log("conditionChange data:\n\t ", data); 
    console.log("conditionChange event:\n\t ", event); 
    console.log("chosenChannel = ", data.chosenChannel()); 
    console.log("chosenCompare = '" + data.chosenCompare() + "'"); 
    console.log("chosenNumber = ", data.chosenNumber()); 
    console.log("isReady() = ", data.isReady()); 
    return true; 
} 

Мои креплениями для chosenChannel и chosenNumber работать нормально, но я пытался в течение нескольких часов, чтобы получить нокаут, чтобы привязать переключатели к selectedCompare, без везения.

Прежде, чем я нажму на любую из переключателей, выбранный параметрCompare привязан к неопределенному, как и следовало ожидать. Когда я нажимаю один из переключателей, вызывается conditionChange, а значение selectedCompare() изменяется от undefined до '' (пустая строка).

Я попытался использовать проверенное связывание, но это не имеет никакого эффекта, по крайней мере привязка значения что-то изменяет.

Я просто пропустил что-то простое здесь?

Answer 1

Используйте checked связывания с радио-кнопками, и связывается с click события вместо change события или chosenCompare() возвращает предыдущее значение вместо текущего. Но вам нужно убедиться, что ваш метод conditionChange возвращает true, чтобы по-прежнему выполнялся обработчик по умолчанию.

var viewModel = { 
 
    chosenCompare: ko.observable(), 
 
    conditionChange: function() { 
 
    alert('chosenCompare is now: ' + viewModel.chosenCompare()); 
 
    return true; 
 
    } 
 
}; 
 

 
ko.applyBindings(viewModel);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 
<div class="btn-group" data-toggle="buttons"> 
 
    <label class="btn btn-primary"> 
 
    <input type="radio" name="timestamp" id="option1" class="btn btn-default" value="L" data-bind="checked: chosenCompare, event: {click: conditionChange}">L</input> 
 
    </label> 
 
    <label class="btn btn-primary"> 
 
    <input type="radio" name="timestamp" id="option2" class="btn btn-default" value="E" data-bind="checked: chosenCompare, event: {click: conditionChange}">E</input> 
 
    </label> 
 
    <label class="btn btn-primary"> 
 
    <input type="radio" name="timestamp" id="option3" class="btn btn-default" value="M" data-bind="checked: chosenCompare, event: {click: conditionChange}">M</input> 
 
    </label> 
 
</div>