Knockout JS - использовать как статическое имя класса, так и имя класса привязки данных

Кто-нибудь знает, могу ли я иметь элемент html как с именем статического класса, так и с динамическим именем, связанным с данными, используя KnockoutJS? Что-то вроде этого:

<span class='staticClassName {{viewModelPropertyValue}}'></span>

Я понимаю, что это не синтаксис ko, я просто использую этот синтаксис, чтобы получить точку.

Ответ 1

Вы можете использовать привязку css для добавления и удаления класса на основе правдоподобия значения, но это похоже на ваш viewModelProperty - это имя класса, а не логическое.

Вы можете использовать привязку attr со статическим классом, включенным как: (attr: { 'class': 'staticClassName ' + viewModelPropertyValue } или (viewModelPropertyValue(), если он является наблюдаемым).

В противном случае здесь есть привязка сообщества, которая добавит и удалит класс в соответствии с тем, как вы находитесь: https://github.com/SteveSanderson/knockout/wiki/Bindings---class

Ответ 2

В нокаут 2.2.0 вы можете!

<span class='staticClassName' data-bind='css: viewModelPropertyValue'></span>

Ответ 3

Я видел много разных ответов для этой проблемы, главным образом в объединять динамические и статические классы с помощью css binding, knockout.js, который не описывает ваши но предлагает решения, которые могут быть применены здесь. Реализация, т.е. Принципы OOCSS нелегко сделать с помощью Knockout, я нашел.

Единственное решение, которое мне понравилось, заключалось в использовании конкатенации строк

<span data-bind="css: [ 'item', 'item-' + name ].join(' ')"></span>

Вы можете использовать это в своем примере. По-моему, это наименее навязчивый, но он уродливый код и быстро становится сверх читабельным.

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

var name = "apple";
var items = { [ "item-" + name ] : "juicy" }

Это означает, что вы можете оставить функциональность [].join(' ') и добавить свои классы в соответствие с тем, как Knockout предписывает ее:

<span data-bind="css : { 'item' : true, [ 'item-' + name ] : true }>

Это более элегантный, легко расширяемый и читаемый. Разумеется, только нижняя точка - это ECMAScript 2015. Если вы можете, используйте имена вычисляемых свойств, если бы я не возвращался обратно к [].join(' ') -statement.

Чтобы увидеть это в действии и немного поиграть с ним, я добавил рабочий пример.

Подробнее о именах вычисленных свойств читайте в https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Object_initializer#Computed_property_names

var viewModel = {};

viewModel.items = ko.observableArray([
  { 'name' : 'Apple' },
  { 'name' : 'Mango' },
  { 'name' : 'Raspberry' }
])

ko.applyBindings(viewModel);

.item {
  font-family: sans-serif
}

.item-Mango span {
  background-color: orange;
  color: #FFF;
}

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

<ul data-bind="foreach: items">

  <li data-bind="css : { 'item' : true, [ 'item-' + name ] : true}">
     <span data-bind="text: name"></span>
  </li>
  
</ul>