Как добавить несколько классов CSS Использование Bindngs

Question

У меня есть связывание данных, в которой я должен использовать два CSS классов

data-bind ="css: isHiddenStage" 

isHiddenStage ==> функция возвращает класс CSS на основе некоторой логики, Это работает отлично, и я хочу, чтобы применить другие классы CSS на основе некоторого условия

css:{ my-class:$index() + 1 === 10 } 

Примечание: Здесь я не могу использовать isHiddenStage функцию для проверки сотрудничества ndition Так в конце концов я получил это:

data-bind ="css: isHiddenStage, css:{ my-class:$index() + 1 === 10 }" 

, который не работает, может быть потому, что я не могу использовать CSS дважды в привязке. Есть ли альтернатива.

С уважением

Answer 1

А что-то вроде:

data-bind ="css:{ isHiddenStage: true, 'my-class': $index() + 1 === 10 }" 

Таким образом, класс isHiddenStage() всегда будет применяться, поскольку его состояние всегда верно.

Обратите внимание, что я помещал 'my-class' в кавычки, потому что это не был действительный идентификатор.

Knockout documentation link source

Answer 2

Там не может быть несколько привязок CSS на одном элементе. Создайте функцию, которая возвращает все классы css, разделенные пробелами, которые будут использоваться в одной привязке css.

HTML

<div data-bind="css: getCssClassesForIndex($index)"></div> 

вид Модель

this.getCssClassesForIndex = function (index) { 
    var cssClasses = this.isHiddenStage() || ''; 
    if ((index + 1) === 10) { 
     cssClasses += ' my-class'; 
    } 
    return cssClasses; 
}.bind(this);