淘汰赛复选框切换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类和在点击

回答

相关问题