Кто-нибудь знает, могу ли я иметь элемент html как с именем статического класса, так и с динамическим именем, связанным с данными, используя KnockoutJS? Что-то вроде этого:
<span class='staticClassName {{viewModelPropertyValue}}'></span>
Я понимаю, что это не синтаксис ko, я просто использую этот синтаксис, чтобы получить точку.
Вы можете использовать привязку css для добавления и удаления класса на основе правдоподобия значения, но это похоже на ваш viewModelProperty - это имя класса, а не логическое.
Вы можете использовать привязку attr со статическим классом, включенным как: (attr: { 'class': 'staticClassName ' + viewModelPropertyValue } или (viewModelPropertyValue(), если он является наблюдаемым).
В противном случае здесь есть привязка сообщества, которая добавит и удалит класс в соответствии с тем, как вы находитесь: https://github.com/SteveSanderson/knockout/wiki/Bindings---class
В нокаут 2.2.0 вы можете!
<span class='staticClassName' data-bind='css: viewModelPropertyValue'></span>
Я видел много разных ответов для этой проблемы, главным образом в объединять динамические и статические классы с помощью 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>