使用 knockout.js css 绑定更改 class 单击

Question

在下面的 div 中，'active' class 当前不可见（根据设计）。如果我手动将 isActive 值更改为 'true'，则 'active' class 在 div 中可见。

<div class="content-nav-bar"data-bind="css: {'active' : 'isActive()' === false}">
<button type="button" data-bind="chgCSS>Submit</button>

如何在使用 knockout.js 单击按钮时更改 isActive 的状态？

删除硬编码值：

<div class="content-nav-bar"data-bind="css: {'active' : 'isActive()'}">

在js文件中有函数：

chgCSS = function(){
    isActive: ko.observable(true)
};

在此先感谢您对我（编码新手）的帮助！

Answer 1

您需要将 isActive 绑定到 this，即 viewModel。只有这样它才能在 HTML.

其次，一旦定义了一个可观察对象，就可以通过简单地使用括号更新它的值，因为可观察对象是一个函数。例如。 :

this.isActive = ko.observable(false); //initialising the variable and setting the initial value to false
this.isActive(true); //Updating the value to true
var currentValue = this.isActive(); // calling the observable with empty brackets fetches the current value

将函数绑定到按钮的正确语法是data-bind = 'click: functionName'

这是使用您的代码的工作 fiddle（单击 'Run Code Snippet'）：

var viewModel = function(){
  var self = this;
  self.isActive = ko.observable(false);
  
  self.chgCSS = function(){
    self.isActive(!self.isActive()); //to switch between true and false
  };
};

ko.applyBindings(new viewModel());

.active {
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<div class="content-nav-bar"data-bind="css: {'active' : isActive()}">
hello
</div>
<button type="button" data-bind="click: chgCSS">Submit</button>

使用 knockout.js css 绑定更改 class 单击

Change class on click using knockout.js css binding

javascript

knockout-3.0