Я знаю, что в нокауте есть возможность указать класс из наблюдаемого свойства, например:
<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 "
Но я немного озадачен, я думаю, что это грязный подход. Я думаю, было бы лучше добиться того же результата в разметке. Как это можно сделать с помощью разметки?
Используйте привязку
<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' :'')) }">
Вы также можете использовать классическое форматирование строк:
<div data-bind="css: Color() + (SomeBooleanProperty ? ' my-class' : '')" >
Не решение вопроса OP, но я получил неожиданный токен; (точка с запятой), потому что у меня было это для привязки:
data-bind="css { selected: isFooSelected }"...
Что, конечно, отсутствует после двоеточия после css:
data-bind="css: { selected: isFooSelected }"...
Я, вероятно, случайно удалил двоеточие, набирая яростно между IDE и чат-окнами и что-не.