knockout.js css-binding語法問題

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> 

我的目的是應用.selected類時，通過做

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

選擇的單選按鈕，但產量並不實際應用的CSS樣式。這樣做的正確方法是什麼？

感謝

Answer 1

做到這一點，正確的方法是通過使計算結果爲true或false實際比較：

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

但你也可能碰到的問題是 - 尤其是火狐，但其他瀏覽器 - ignore styles on radio buttons。

一個選項是使用label上的css綁定而不是input。

另一種方法是製作單獨的輸入+標籤，而不是嵌套的標籤，並使用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>