淘汰賽複選框切換CSS類和在點擊

<div data-bind="css: { highlighted: highlight }, click: toggleHighlight"> 
    random string 
</div> 
<input type="checkbox" data-bind="css: { 'checked': dimitri, 'unchecked': !dimitri() }, click: toggledimitri, checked: dimitri"> 

var ViewModel = function() { 
    var self = this; 
    self.dimitri = ko.observable(false); 
    self.toggledimitri = function() { self.dimitri(!self.dimitri()) }; 
    self.highlight = ko.observable(true); 
    self.toggleHighlight = function() { self.highlight(!self.highlight()) }; 
} 

ko.applyBindings(new ViewModel()); 
var vm = ko.dataFor(document.body);

基本上什麼我後CSS類的觸發翻轉電檢查{checked和unchecked}同時還檢查並取消選中使用淘汰賽選中複選框：CSS：和點擊：。任何想法，我有點不正確？ jsfiddle 淘汰賽複選框切換CSS類和在點擊

來源

2016-06-21 Joe Borg

'checked'綁定不需要額外的'click'綁定來獲得切換功能。從您的複選框中刪除'click'綁定並查看會發生什麼。 – user3297291

首先感謝您的幫助，是的它讓我更接近了一步，但儘管我已經嘗試過了，但是我已經恢復了原狀，因爲這樣可以防止在可觀察的基因錯誤時分配未經檢查的類。當元素未被選中時，我需要分配一個類。 –

您需要在'unchecked'類綁定中使用'！dimitri（）'。 '！dimitri'不能自動解包觀測值。所以：'data-bind =「css：{'checked'：dimitri，'unchecked'：！dimitri（）}，checked：dimitri」' – user3297291

除了使用css綁定的，你可以嘗試使用attr結合並直接綁定到class屬性。您可以使用ko.computed方法返回相應的CSS類名稱。此外，您不需要如user3297291所述的click事件。複選框應該是這樣的：

<input type="checkbox" data-bind="attr: { 'class': checkedClass }, checked: dimitri">

而且ko.computed方法是這樣的：

this.checkedClass = ko.computed(function() { 
    return this.dimitri() ? 'checked' : 'unchecked'; 
}, this);

這裏是一個更新的小提琴一個鏈接，說明了這一點：

http://jsfiddle.net/KDypD/56/

來源

2016-06-21 19:52:40

感謝隊友你的不同方法也非常有吸引力和重要的是要記住它 –

正如評論中所建議的那樣，勾選和點擊會有效地否定對方。檢查的綁定會自動切換，而點擊則手動切換一次。刪除點擊可修復問題。

<input type="checkbox" data-bind="css: { 'checked': dimitri, 'unchecked': !dimitri() }, checked: dimitri">

http://jsfiddle.net/KDypD/55/

來源

2016-06-21 12:14:53 Derpy

首先感謝您的幫助，並且是讓我更靠近一步，但儘管我嘗試過我已經恢復了原來的狀態，因爲這樣可以防止在可觀察到的可見錯誤時分配未經檢查的類。當元素未被選中時，我需要分配一個類。 –

@JoeBorg你不能使用'！dimitri'，因爲'dimitri'是可觀察的。如果你想從一個可觀察的表達式得到它的內容：'unchecked：！dimitri（）' 請注意，答案是這樣的。 –

@RoyJ感謝人澄清進一步，這樣簡單的語法變化，並使所有的不同，我想我可能在網上發現了類似的東西之前，在這裏發佈的問題，由於某種原因，無論我試圖太頻繁在小提琴和它沒有更新代碼更改，我記得類似於你的解決方案沒有解決。但現在，我慢慢地嘗試你的工作正常:) –

淘汰賽複選框切換CSS類和在點擊

回答

相關問題