javascript KnockoutJS 值在数据绑定中切换
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14867906/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
KnockoutJS value toggling in data-bind
提问by dk123
I have a bit of javascript:
我有一些 javascript：
function ViewModel() {
var self = this;
self.highlight = ko.observable(true);
}
ko.applyBindings(new ViewModel());
And the html that complements it:
以及补充它的 html：
<div data-bind="css: { highlighted: highlight }, click: highlight( !highlight() )">
random string
</div>
What I'm trying to achieve:
我正在努力实现的目标：
- The css class 'highlighted' to only be activated when var highlight is true
- Clicking on the div will toggle the bool value of var highlight
- Wanted result: clicking on the div to activate/deactivate its css class
- css 类“突出显示”仅在 var highlight 为 true 时激活
- 单击 div 将切换 var highlight 的 bool 值
- 想要的结果：单击 div 以激活/停用其 css 类
What I'm getting:
我得到了什么：
- The initial value of highlight is
true, yet the css class starts deactivated (if I change the initial value tofalse, the css class is activated: which seems as if I've somehow triggered the click bind when I haven't yet clicked anything) - The div's css class does not toggle on click
- highlight 的初始值是
true，但是 css 类开始停用（如果我将初始值更改为false，则 css 类被激活：这似乎是当我还没有点击任何东西时我以某种方式触发了点击绑定） - div 的 css 类不会在点击时切换
I'd rather not make a new corresponding click function inside ViewModel. I'm looking if possible for a bit of code I can place solely inline within the data-bind.
我宁愿不在 ViewModel 中创建一个新的相应点击功能。如果可能的话，我正在寻找一些我可以单独放置在数据绑定中的代码。
Here's the code on JSFiddle: http://jsfiddle.net/4wt4x/1/
这是 JSFiddle 上的代码：http: //jsfiddle.net/4wt4x/1/
Can anyone explain what's happening and what I'm doing incorrectly?
谁能解释发生了什么以及我做错了什么？
回答by Kim Tranjan
I know it's an old question, but maybe could help someone. If you need to use toggle in a lot of places, maybe some custom binding sugar could help you:
我知道这是一个老问题，但也许可以帮助某人。如果您需要在很多地方使用切换，也许一些自定义绑定糖可以帮助您：
Binding:
捆绑：
ko.bindingHandlers.toggleClick = {
init: function (element, valueAccessor) {
var value = valueAccessor();
ko.utils.registerEventHandler(element, "click", function () {
value(!value());
});
}
};
Usage:
用法：
<div data-bind="css: { highlighted: highlight }, toggleClick: highlight">
random string
</div>
Example:
例子：
This approach keeps some of my views very cleaner. Hope it helps.
这种方法使我的一些观点非常清晰。希望能帮助到你。
回答by Los Frijoles
Your click: highlight( !highlight() )is incorrect. Click is going to try to execute a function, and when the binding was initialized, highlight would have returned whatever its value was and that is what click is going to try to execute (trueor falsein your case). You need to do something like this:
你click: highlight( !highlight() )的不正确。Click 将尝试执行一个函数，并且当绑定被初始化时，highlight 将返回其值是什么，这就是 click 将尝试执行的（true或false在您的情况下）。你需要做这样的事情：
In your javascript, place in your model:
在您的 javascript 中，放置在您的模型中：
self.toggleHighlight = function () { self.highlight(!self.highlight()) };
Then change the binding to say click: toggleHighlight
然后更改绑定说 click: toggleHighlight
Like so: http://jsfiddle.net/KDypD/1/
像这样：http: //jsfiddle.net/KDypD/1/
You may need to adjust your highlight initial value as well to reflect how you want the page to show up initially.
您可能还需要调整突出显示的初始值，以反映您希望页面最初显示的方式。
回答by pgk
Another option is to use a reusable custom function extension (custom function is used instead of extender because there are no parameters and it looks cleaner):
另一种选择是使用可重用的自定义函数扩展（使用自定义函数代替扩展器，因为没有参数，看起来更干净）：
ko.observable.fn.toggleable = function () {
var self = this;
self.toggle = function () {
self(!self());
};
return self;
};
Usage
用法
self.highlight = ko.observable(true).toggleable();
Html
html
<div data-bind="css: { highlighted: highlight }, click: highlight.toggle">
random string
</div>
回答by lukace
If you really want to do it inline:
如果你真的想内联：
<div data-bind="click: highlight.bind($root, !highlight()), css: { highlighted: highlight } ">
random string
</div>
where highlight is the boolean observable.
其中 highlight 是布尔值。
