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>

我想要实现的目标：

css类'突出显示'仅在var highlight为true时激活
点击div将切换var highlight
通缉结果：点击div激活/停用其css类

我得到了什么：

突出显示的初始值为true，但css类开始停用（如果我将初始值更改为false，则会激活css类：这似乎我已经以某种方式触发当我还没有点击任何内容时点击绑定）
div的css类不会在点击

我宁愿不在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。

KnockoutJS值在数据绑定中切换

4 个答案: