Knockout JS - 同時使用靜態類名和數據綁定類名

Question

任何人都知道我是否可以使用KnockoutJS同時擁有靜態類名和動態數據綁定類名的html元素？事情是這樣的：

<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

在淘汰賽2.2.0，您可以

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

Answer 3

我見過這個問題很多不同的答案，主要是在combine dynamic and static classes through css binding, knockout.js這並不描述你的問題，但提供的解決方案，可以在這裏應用。實施ie。我發現，OOCSS原則不容易使用Knockout完成。

吸引我的唯一的解決辦法是使用字符串連接

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

你可以在你的榜樣使用。在我看來，這是最不引人注目的，但它是醜陋的代碼，並迅速變得不可讀。

但是，如果您可以在項目中使用ECMAScript2015，則可以使用計算屬性名稱，如下所示。

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

這意味着你可以離開了[].join(' ')功能，並添加你的類淘汰賽實際規定的方式：

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