Question

任何人都知道我是否可以拥有一个带有静态类名的html元素以及一个使用KnockoutJS的动态数据绑定类名？像这样：

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

我意识到这不是ko语法，我只是使用这种语法来解决问题。

Answer 1

您可以使用css绑定根据值的真实性添加和删除类，但听起来您的viewModelProperty是类的名称而不是布尔值。

您可以将attr绑定与包含的静态类一起使用，如：（attr: { 'class': 'staticClassName ' + viewModelPropertyValue }或（viewModelPropertyValue()，如果它是可观察的）。

否则，这里有一个社区绑定，它将以您所追求的方式添加和删除一个类：https://github.com/SteveSanderson/knockout/wiki/Bindings---class

Answer 2

在Knockout 2.2.0中，你可以！

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

Answer 3

我已经看到了很多关于这个问题的不同答案，主要是combine dynamic and static classes through css binding, knockout.js并没有描述你的问题，但提供了可以在这里应用的解决方案。实施即。我发现使用Knockout并不容易实现OOCSS原则。

吸引我的唯一解决方案是使用字符串连接

<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(' ') - 语句。

为了看到这一点，并稍微讨论一下，我添加了一个有效的例子。

在https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Object_initializer#Computed_property_names

了解有关计算属性名称的更多信息

＆＃13;

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

＆＃13;

.item {
  font-family: sans-serif
}

.item-Mango span {
  background-color: orange;
  color: #FFF;
}

＆＃13;

<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>

＆＃13;

Knockout JS - 同时使用静态类名和数据绑定类名

3 个答案: