knockout.js CSSバインディング構文の問題

Question

選択時に背景色を変更するラジオボタンフィルタを作成しようとしています。今、それは次のようになります。

  <div data-bind="visible: applications().length > 0"> 
          <label>Filter: </label> 
          <label class="radio-inline"> 
           <input type="radio" value="new" data-bind="checked: applicationsFilter, css: {selected: applicationsFilter}" class="" /> 
           New/Pending Review 
           (<span data-bind="text: newApplicationsCount"></span>) 
          </label> 
          <label class="radio-inline"> 
           <input type="radio" value="shortlisted" data-bind="checked: applicationsFilter, css: {selected: applicationsFilter}" /> 
           Shortlisted 
           (<span data-bind="text: shortlistedApplicationsCount"></span>) 
          </label> 
          <label class="radio-inline"> 
           <input type="radio" value="connected" data-bind="checked: applicationsFilter, css: {selected: applicationsFilter}}" /> 
           Connected 
           (<span data-bind="text: connectedApplicationsCount"></span>) 
          </label> 
          <label class="radio-inline"> 
           <input type="radio" value="all" data-bind="checked: applicationsFilter, css: {selected: applicationsFilter}" /> 
           All 
           (<span data-bind="text: allApplicationsCount"></span>) 
          </label> 
          <label class="radio-inline" data-bind="visible: applications().length > 0"> 
           <input type="checkbox" data-bind="checked: showHiddenApplications" /> 
           Include Hidden 
          </label> 
         </div> 

私の意図は、ラジオボタンが

data-bind="checked: applicationsFilter, css: {selected: applicationsFilter}} 

を行うことによって選択されたときに.selectedクラスを適用することでしたが、出力は実際にCSSスタイルを適用しません。これを行う正しい方法は何ですか？これを行うには

おかげ

Answer 1

正しい方法はtrueまたはfalseに評価され、実際の比較することによって、次のとおりです。

css: {selected: applicationsFilter() == 'new'} 

をしかし、あなたはまた、その問題が発生した可能性がある - 特にFirefoxのが、他のブラウザも同様です - ignore styles on radio buttons。

inputの代わりにのCSSバインディングを使用することもできます。

もう1つは、ネストされたものではなく、別の入力+ラベルを作成し、CSSを使用して:checked状態に反応することです。以下は非常に役立つuniqueId and uniqueFor custom bindings by RP Niemeyerを使用しています。

// uniqueId/uniqeFor custom bindings by @RPNiemeyer, https://stackoverflow.com/a/9235013/18771 
 
ko.bindingHandlers.uniqueId = { 
 
    init: function(element, valueAccessor) { 
 
     var value = valueAccessor(); 
 
     value.id = value.id || ko.bindingHandlers.uniqueId.prefix + (++ko.bindingHandlers.uniqueId.counter); 
 

 
     element.id = value.id; 
 
    }, 
 
    counter: 0, 
 
    prefix: "unique" 
 
}; 
 

 
ko.bindingHandlers.uniqueFor = { 
 
    init: function(element, valueAccessor) { 
 
     var value = valueAccessor(); 
 
     value.id = value.id || ko.bindingHandlers.uniqueId.prefix + (++ko.bindingHandlers.uniqueId.counter); 
 

 
     element.setAttribute("for", value.id); 
 
    } 
 
}; 
 

 

 
ko.applyBindings({ 
 
    applicationsFilter: ko.observable(), 
 
    filterOptions: [ 
 
     {value: "new", label: "New/Pending Review"}, 
 
     {value: "shortlisted", label: "Shortlisted"}, 
 
     {value: "connected", label: "Connected"}, 
 
     {value: "all", label: "All"}, 
 
    ] 
 
});

.radio-inline:checked+label { 
 
    border: 1px solid red; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> 
 

 
<div data-bind="foreach: filterOptions"> 
 
    <input type="radio" class="radio-inline" data-bind="value: value, checked: $parent.applicationsFilter, uniqueId: $data" /> 
 
    <label data-bind="text: label, uniqueFor: $data"></label> 
 
</div> 
 

 
<pre data-bind="text: ko.toJSON($root, null, 2)"></pre>