Knockout JS: utilice tanto el nombre de clase estática como el nombre de clase enlazado a datos

Question

¿Alguien sabe si puedo tener un elemento html con un nombre de clase estático así como un nombre de clase dinámica vinculado a datos utilizando KnockoutJS? Algo como esto:

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

Me di cuenta que no es la sintaxis ko, sólo estoy usando esta sintaxis para conseguir el punto a través.

Answer 1

Puede usar el enlace css para agregar y eliminar una clase según la veracidad de un valor, pero parece que viewModelProperty es el nombre de una clase en lugar de un booleano.

Puede utilizar el attr unión con la clase estática incluyó como:. (attr: { 'class': 'staticClassName ' + viewModelPropertyValue } o (viewModelPropertyValue() si se trata de un observable)

De lo contrario, hay una comunidad vinculante aquí que agregar y quitar una clase en el de manera que usted está después: https://github.com/SteveSanderson/knockout/wiki/Bindings---class

Answer 2

En Knockout 2.2.0, puede

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

Answer 3

he visto una muchas respuestas diferentes para este problema, principalmente en combine dynamic and static classes through css binding, knockout.js que no describe su problema, pero ofrece soluciones que podrían aplicarse aquí. Implementando ie. Los principios de OOCSS no se hacen fácilmente usando Knockout, he encontrado.

La única solución que me atrajo fue utilizar una concatenación de cadenas

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

Puede utilizar esto en su ejemplo. En mi opinión, este es el menos molesto, pero es un código feo y rápidamente se vuelve más legible.

Sin embargo, si puede usar ECMAScript2015 en su proyecto, tiene la capacidad de utilizar nombres de propiedad calculados, que se ven así.

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

Esto significa que usted puede dejar de lado la funcionalidad [].join(' ') y añadir sus clases de la manera Knockout realidad prescribe que:

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

Es más elegante, fácilmente ampliable y de fácil lectura. El único punto negativo, por supuesto, es que es ECMAScript 2015. Si puede, utilice los nombres de las propiedades calculadas; si no, volvería a la [].join(' ') -statement.

Para ver esto en acción y jugar un poco con él, he agregado un ejemplo de trabajo.

Más información acerca de los nombres de propiedades calculadas en 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>