20

我有一点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 类“突出显示”
  2. 点击 div 将切换 var highlight 的 bool 值
  3. 想要的结果:单击 div 以激活/停用其 css 类

我得到了什么:

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

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

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

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

4

4 回答 4

43

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

捆绑:

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/

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

于 2014-05-13T15:13:45.447 回答
21

click: highlight( !highlight() )的不正确。Click 将尝试执行一个函数,并且在初始化绑定时, highlight 将返回其值,这就是 click 将尝试执行的(truefalse在您的情况下)。你需要做这样的事情:

在您的 javascript 中,放置在您的模型中:

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

然后改变绑定说click: toggleHighlight

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

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

于 2013-02-14T04:43:28.150 回答
7

另一种选择是使用可重用的自定义函数扩展(使用自定义函数而不是扩展器,因为没有参数并且看起来更干净):

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>
于 2015-02-06T20:53:14.700 回答
4

如果你真的想内联:

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

其中 highlight 是 boolean observable。

于 2014-12-26T20:30:27.023 回答