Knockout JS - 使用静态类名和数据绑定类名答案

【问题标题】：Knockout JS - Use both static class name as well as data bound class nameKnockout JS - 使用静态类名和数据绑定类名
【发布时间】：2016-08-19 16:23:45
【问题描述】：

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

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

我意识到这不是 ko 语法，我只是在使用这种语法来说明问题。

【问题讨论】：

标签： knockout.js

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

在 Knockout 2.2.0 中，您可以！

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

【讨论】：

【解决方案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(' ')-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>

【讨论】：