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>

我想要实现的目标：

1. 只有当var highlight为true时，才会激活css类'highlight'
2. 单击div将切换var highlight的bool值
3. 想要的结果：点击div来激活/停用它的css类

我得到了什么：

1. highlight的初始值为true ，但css类开始停用（如果我将初始值更改为false ，则css类被激活：当我还没有点击任何东西时，好像我已经以某种方式触发了click绑定）
2. div的css类不会在click上切换

我宁愿不在ViewModel中创建一个新的相应的点击功能。 我正在寻找可能的一些代码，我可以在data-bind中单独内联。

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

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

Answer 1

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

捆绑：

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/

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

Answer 2

您的click: highlight( !highlight() )不正确。 Click将尝试执行一个函数，并且当初始化绑定时，突出显示将返回其值的任何值，这将是单击将尝试执行的操作（在您的情况下为true或false ）。 你需要做这样的事情：

在您的JavaScript中，放置在您的模型中：

self.toggleHighlight = function () { self.highlight(!self.highlight()) };

然后更改绑定说click: toggleHighlight

像这样： http ： //jsfiddle.net/KDypD/1/

您可能还需要调整突出显示的初始值，以反映您希望页面最初显示的方式。

Answer 3

另一种选择是使用可重复使用的自定义函数扩展（使用自定义函数代替扩展器，因为没有参数，它看起来更干净）：

ko.observable.fn.toggleable = function () {
    var self = this;
    self.toggle = function () {
        self(!self());
    };

    return self;
};

用法

self.highlight = ko.observable(true).toggleable(); 

HTML

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

Answer 4

如果你真的想内联它：

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

其中highlight是boolean observable。