数据绑定中的 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 类“highlighted”
2. 点击 div 会切换 var highlight 的 bool 值
3. 想要的结果：单击 div 以激活/停用其 css 类

我得到了什么：

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

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

这是 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 将尝试执行一个函数，并且在初始化绑定时， 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 是可观察的布尔值。