javascript - 数据绑定(bind)中的 KnockoutJS 值切换

Question

我有一点javascript:

function ViewModel() {
    var self = this;
    self.highlight = ko.observable(true);   
}

ko.applyBindings(new ViewModel());

以及补充它的html:

<div data-bind="css: { highlighted: highlight }, click: highlight( !highlight() )">
    random string
</div>

我想要达到的目标:

仅当 var highlight 为 true

时才激活 css 类“突出显示”

单击 div 将切换 var highlight

的 bool 值

想要的结果:单击 div 以激活/停用其 css 类

我得到了什么:

高亮初始值为true ，但 css 类开始停用(如果我将初始值更改为 false ，css 类被激活:似乎我在尚未点击任何东西时以某种方式触发了点击绑定(bind))

div 的 css 类在单击时不切换

我宁愿不在 ViewModel 中创建新的相应点击功能。如果可能的话，我正在寻找一些我可以在数据绑定(bind)中单独放置的代码。

这是 JSFiddle 上的代码: http://jsfiddle.net/4wt4x/1/

谁能解释发生了什么以及我做错了什么？

Answer 1

我知道这是一个老问题，但也许可以帮助某人。
如果您需要在很多地方使用切换，也许一些自定义绑定(bind)糖可以帮助您:

绑定(bind):

ko.bindingHandlers.toggleClick = {
    init: function (element, valueAccessor) {
        var value = valueAccessor();

        ko.utils.registerEventHandler(element, "click", function () {
            value(!value());
        });
    }
};

用法:

<div data-bind="css: { highlighted: highlight }, toggleClick: highlight">
    random string
</div>

示例:

http://jsfiddle.net/A28UD/1/

这种方法使我的一些观点非常清晰。希望能帮助到你。