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. 突出显示的初始值是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>