javascript - 如何使用 Knockout JS 添加类？

Question

我是第一次尝试 Knockout，并且已经完成了基本教程并查看了各种示例。

但是trying it myself (jsFiddle) 不太有效。

我想做的就是在单击“Click me”文本时将 open 类添加到 div。

我在这里缺少什么？

//HTML
<div class="clickMe" data-bind="click: expand">Click me</div>

<div class="wrapper">        
    <div class="content" data-bind="css: {expandMenu : open}">
      This is a test
    </div>
</div>

//JS
function viewModel() {
    var self = this;

    self.expandMenu = ko.observable(false);

    self.expand = function () {
        self.expandMenu(!self.expandMenu());
    };
};
ko.applyBindings(new viewModel());

// CSS
.content {display: none;}
.content.open {display: block;}    

Answer 1

要使用 css 绑定(bind)中的 observable 修复此开关类名称:

data-bind="css: {open : expandMenu}"

另外，你可以使用css绑定(bind)是这样的格式:

data-bind="css: getClassForSomething()" // getClassForSomething must return css class (string)

和

data-bind="css: { open: isSomethingDone() }" // considering that isSomethingDone is viewmodel's method