Was ist die richtige Methode zum Ankreuzen der Checkbox mit Bootstrap-Schaltflächengruppe?

Question

Die geprüfte Eigenschaft überprüft nicht die Benutzeroberfläche.

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

Die Spanne der Werte angezeigt I d MON wahr & & TUE falsch erwarten, aber die UI zeigt nicht Montag geprüft. Es aktualisiert auch nicht die IsChecked Observable, wenn ich es manuell überprüfe.

Answer 1

Die data-tobble="buttons" Bit spielen nicht schön mit KnockoutJS, weil Bootstrap wird intern die click auf dem label Handhabung und macht ein preventDefault aus dem Kontrollkästchen Doppel Makel.

This other question ist fast ein Duplikat, aus irgendeinem Grunde, obwohl ich nicht die benutzerdefinierten Bindungs ​​Handler aus den Antworten dort bekommen konnte (die ist wahrscheinlich der am besten geeignete Ansatz) für Ihr spezielles Szenario zu arbeiten. Deshalb poste ich hier eine separate Antwort.

Ein Workaround für Ihre aktuelle Situation ist einfach das Element input loszuwerden. Da Sie mit KnockoutJS arbeiten, ist dies wahrscheinlich/vielleicht kein großes Problem, da Sie serialisierte Ansichtsmodelle in der Regel an Ihr Back-End senden (und sich nicht auf ein HTML-Formular mit Eingaben verlassen). Wenn Sie das tun, können Sie einfach umgehen, indem Sie:

1. einen click Handler (die beispielsweise mit Blick Modell Konstruktorfunktionen sauberer als unten aussieht);
2. Einstellung .active zunächst selbst (Ausgangszustand sollte durch Benutzercode according to the docs eingestellt werden);

Hier ist eine Demo:

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>