Изменить класс по клику, используя привязку knockout.js css - PullRequest
Новая
       6

Изменить класс по клику, используя привязку knockout.js css

0 голосов
/ 28 августа 2018

В следующем div, «активный» класс в настоящее время НЕ виден (для дизайна). Если я вручную изменю значение isActive на «true», «активный» класс будет виден в div. 

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

Как изменить состояние isActive, когда я нажимаю кнопку с помощью knockout.js?

Удалить жестко запрограммированное значение: 

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

В файле js есть функция: 

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

Заранее благодарю за помощь (новичок в кодировании)!

1 Ответ

0 голосов
/ 29 августа 2018
  1. Вам необходимо связать isActive с this, то есть с моделью представления. Только тогда он будет доступен для использования в HTML.

  2. Во-вторых, когда вы определяете наблюдаемую информацию, вы можете обновить ее значение, просто используя скобки, поскольку наблюдаемая является функцией. Например. : 

    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

  3. Правильный синтаксис для привязки функции к кнопке: data-bind = 'click: functionName'

Вот рабочая скрипка с вашим кодом (нажмите «Запустить фрагмент кода»): 

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>
...