Как указать два класса css: из свойства и условного класса

Я знаю, что в нокауте есть возможность указать класс из наблюдаемого свойства, например:

<div data-bind="css: Color " >

Нокаут также предоставляет возможность указывать условный рендеринг класса следующим образом:

<div data-bind="css: { 'my-class' : SomeBooleanProperty  }" >

Но какая разметка должна быть указана, если мне нужны эти функции связывания cock knockout?

Я пробовал это, но не повезло:

<div data-bind="css: { Color, 'my-class' : SomeBooleanProperty  }" >

У меня есть ошибка:

Ошибка: невозможно выполнить синтаксический анализ привязок. SyntaxError: Неожиданный токен,;

Я не нашел никакого примера в google или в официальных документах.

UPDATE

Я нашел обходное решение: создайте строку стиля в коде и поместите ее в свойство, например:

item.AdditionalCss(Color() + " " + (result.IsSortable() ? 'my-class' : null));

И укажите этот класс в html:

data-bind="css: AdditionalCss "

Но я немного озадачен, я думаю, что это грязный подход. Я думаю, было бы лучше добиться того же результата в разметке. Как это можно сделать с помощью разметки?

Ответ 1

Используйте привязку

<div data-bind="class: myClass" >

Просмотр модели:

var vm = {
     myClass : ko.observableArray(),
};
vm.myClass.push('class1');
vm.myClass.push('class2');

Вы также можете использовать привязку класса к вычисленному.

Но если вы не хотите его использовать, вы можете сделать это:

<div data-bind="attr: { 'class' :( Color() +  (SomeBooleanProperty() ? ' my-class' :'')) }">

Ответ 2

Вы также можете использовать классическое форматирование строк:

<div data-bind="css: Color() + (SomeBooleanProperty ? ' my-class' : '')" >

Ответ 3

Не решение вопроса OP, но я получил неожиданный токен; (точка с запятой), потому что у меня было это для привязки:

data-bind="css { selected: isFooSelected }"...

Что, конечно, отсутствует после двоеточия после css:

data-bind="css: { selected: isFooSelected }"...

Я, вероятно, случайно удалил двоеточие, набирая яростно между IDE и чат-окнами и что-не.