Каков правильный способ привязки с флажком группы загрузочных кнопок?

Question

Проверенное свойство не проверяет пользовательский интерфейс.

HTML

<div id="dayGroup" data-bind="foreach: dowArr" class="btn-group input-group input-append" data-toggle="buttons"> 
    <label class="btn btn-primary"> 
     <input type="checkbox" data-bind="checked: isChecked, value: day" autocomplete="off"/> 
     <span data-bind="text: day"></span> 
     <span data-bind="text: isChecked"></span> 
    </label> 
</div> 

JS

vm.dowArr.push({ day: 'MON', dow: 1, isChecked: ko.observable(true) }); 
vm.dowArr.push({ day: 'TUE', dow: 2, isChecked: ko.observable(false) }); 

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

Answer 1

data-tobble="buttons" бит не играет хорошо с KnockoutJS, потому что Bootstrap внутренне будет заниматься click на label и делать preventDefault с двойной переключая флажок.

This other question почти дубликат, хотя по какой-то причине я не мог получить пользовательские связывания обработчиков из ответов там (которые является вероятно, наиболее подходящим подходом) для работы конкретного сценария. Вот почему я отправляю отдельный ответ здесь.

Обходной путь для вашей текущей ситуации - это просто избавиться от элемента input. Поскольку вы работаете с KnockoutJS, это, вероятно, возможно, не является большой проблемой, потому что вы обычно публикуете сериализованные модели представлений на своем внутреннем сервере (и не полагаетесь на html-форму со входами). Если вы делаете, вы можете просто обходной путь:

1. Использование click обработчика (который выглядит чище, чем ниже, например, с функциями вид модели конструктора);
2. Установка .active первоначально самостоятельно (начальное состояние должно быть установлено по коду пользователя according to the docs);

Вот демо:

var vm = { dowArr: ko.observableArray([]) }; 
 
vm.dowArr.push({ day: 'MON', dow: 1, isChecked: ko.observable(true) }); 
 
vm.dowArr.push({ day: 'TUE', dow: 2, isChecked: ko.observable(false) }); 
 
ko.applyBindings(vm);

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script> 
 

 
<div id="dayGroup" data-bind="foreach: dowArr" class="btn-group input-group input-append" data-toggle="buttons"> 
 
    <label class="btn btn-primary" 
 
      data-bind="click: function() { $data.isChecked(!$data.isChecked()); }, 
 
         css: { active: isChecked }"> 
 
     <span data-bind="text: day"></span> 
 
     <span data-bind="text: isChecked"></span> 
 
    </label> 
 
</div> 
 
<hr> 
 
<pre data-bind="text: ko.toJSON($root, null, 2)"></pre>